html {
  height: 100%;
  width: 100%;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;

  height: 8vh;
  width: 100%;

  font-family: "Montserrat", sans-serif;
  text-decoration: none;

  position: fixed;
  top: 0;
  left: 0;

  padding: 0 40px;
  background-color: rgb(196, 231, 231); /* optional */
  z-index: 1000;
}




.heading {

  color: blue;

  text-transform: uppercase;

  letter-spacing: 5px;

  font-size: 20px;

  user-select: none;

}

.nav-links {
  display: flex;
  list-style: none;     
  gap: 30px;            
}


.nav-links li {

  list-style: none;

}

.nav-links a {
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  color: black;
  font-weight: 500;
}




.nav-links a:hover:not(.active) {

  background-color: rgb(100, 165, 165);

}

.nav-links li a.active {

  background-color: rgb(100,165,165);

}

h1,h2,h3,h5,p,button {
  font-family: "Noto Sans", sans-serif;
  
}

.project {
  color: black;
  background-color: lightgrey;
  width: 300px;
  height: 400px;
  border: 15px solid rgb(13, 135, 192);
  padding: 50px;
  margin: 20px;
  font-family: "Noto Sans", sans-serif;
  display: inline-block; 
  box-sizing: border-box;
  text-align: center;
}

.title {
  padding-bottom: 20px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
}

.projectimage {
  width: 100px;
  height: 100px;
}

.projectcontainer {
  text-align: center;
}

button {
  border-style: round;
}

.socials {
  display: flex; /* Apply flexbox on the body */
  justify-content: center; /* Horizontally center the content */
  align-items: center; /* Vertically center the content */
  padding-top: 25px;
  padding-bottom: 25px;
}

.socialmedia {
  height: 80px;
  width: 80px;
  padding-right: 15px
}



.recommended-reading {
  padding: 40px;
}

.recommended-reading h2 {
  margin-bottom: 20px;
  font-size: 24px;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, auto);
  gap: 20px;
}

.book-grid img {
  width: 100%;
  aspect-ratio: 2 / 3; /* book cover ratio */
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.book-grid img:hover {
  transform: scale(1.05);
}




section {
  scroll-margin-top: 8vh; /* height of your nav */
}




a {
    color: #000000;
    text-decoration: none;
}

.essays {
  font-style: italic;
}