main {
  font-family: "Raleway", sans-serif;
}

p {
  color: #390e17;
}

body {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

/* hack to delay visibility until CSS has loaded */
body { 
  opacity: 0; 
}

header {
  background-color: #dcc8a0;
  color: #621e25;
  padding: 10px 0;
  background-size: cover;
}
header#index {
  background-image: url("../photos/libraryTwo.png");
  padding: 3rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 5rem;
}

@media screen and (max-width: 800px) {
  header#index {
    background-image: url("../photos/IMG_1512.png");
    padding: 3rem 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 5rem;
  }
}

header#about {
  background-image: url("../photos/chalkboard-SBI-300841588.JPEG");
  padding: 3rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 5rem;
}

header#research {
  background-image: url("../photos/191204DJI_0140.JPEG");
  padding: 3rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 5rem;
}

@media screen and (max-width: 600px) {
  header#index,
  header#about,
  header#research {
    padding: 20px 40px; /* Further adjust padding for mobile */
  }
}

nav {
  max-width: 100vw;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 5px 10px;
}

@media screen and (max-width: 600px) {
  nav ul li {
    margin: 5px;
  }

  nav ul li a {
    font-size: 14px; /* Reduce font size */
  }
}

nav ul li a {
  text-decoration: none;
  font-family: "Libre Baskerville", serif;
}

a {
  color: #621e25;
  text-decoration: underline;
}

section {
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section#home {
  text-align: center;
}

section#home .intro {
  padding: 50px 0;
}

section#about {
  height: auto; /* Allows the section to expand to the height of the image */
  overflow: hidden;
  justify-content: center;
  padding-bottom: 20px;
  padding: 60px;
}

h1,
h2 {
  font-family: "Libre Baskerville", serif;
  color: #390e17;
}

footer {
  background: #621e25;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

@media screen and (max-width: 600px) {
  footer {
    padding: 15px 0; /* Further adjust padding for mobile */
  }
}

footer p {
  color: #faf9ec;
  font-family: "Raleway", serif;
}

a.current-nav-link {
  color: black;
}

img.portrait {


  width: 13rem;
  max-width: 100vw;
  border: 1px solid black;
  border-radius: 4px;
  padding: 0 0 0 0;

  
}

@media screen and (max-width: 800px) {
  img.portrait {
    width: calc(100vw - 40px); /*Further adjust portrait for mobile*/
    padding: 0;
    align-items: center; /* For centering the image */ 

    display: block;
margin: auto;
max-width: 100%;
  }
  section#about {
    padding-bottom: 70px; /* Increase padding at the bottom for mobile screens */
  }
}

iframe {
  @media screen and (max-width: 1250px) {
    max-width: 100%;
  }
}

/* media query code */