@font-face {
    font-family: Averia;
    src: url(averia/AveriaSerifLibre-Italic.ttf);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows:  auto 1fr auto;
  grid-template-areas: 
  "logo logo"
  "sidebar main"
  "footer footer";
  background: #ffffff;
  margin: 0;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
}

h1{
font-size: clamp(1.8rem, 2.5vw, 5rem);
font-family: Averia;
grid-area: logo;
grid-column: 1/3 ;
max-height: fit-content;
top: 0;
padding-left: 2rem;
padding-bottom: 1rem;
padding-top: 1rem;
align-self: start;
position: sticky;
z-index: 100;
color: #f1f1f1;
}

nav{
  grid-area: sidebar;
}

main{
  grid-area: main;
}

footer{
  grid-area: footer;
  text-align: center;
  padding: 1rem;
  line-height: 1.5;
  position: sticky;
  bottom: 0;
}

/*SVG menu button*/
#open-menu{
  display: none;
}

#close-menu{
  display: none;
}

/* Set styles for the sidebar */

  nav {
    float: left;
    width: 15%;
    margin-left: 20px;
    padding-left: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    text-align: left;
    font-family: 'Times New Roman', Times, serif;
    position: sticky;
    min-width: 250px;
    height: calc(100dvh-77.5px);
    top: 77.5px;
    align-self: start;
}
  
  
  nav ul {
    margin: 0;
    padding: 0;
  }
  
  nav li {
    display: block;
    font-family: 'Times New Roman', Times, serif;
    padding-top: 10px;
  }
  
  nav li a {
    display: inline-block;
    padding-top: 10px;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }

/* Remove underlines from links */
  a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: rgb(0, 0, 0);
  }
  
/* Set styles for the content area */
 main {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 2fr;
     grid-template-rows:  1fr;
     grid-template-areas: 
     "image bio" ;
    margin: 0;
    padding: 0;
  }

  main img {
    grid-area: image;
    float:  left;
    width: 100%;
    height: auto;
  }
  
  main p {
    grid-area: bio;
    overflow: auto;
    background-color: rgb(255, 255, 255);
    line-height: 2;
    font-size: .8rem;
    font-family: 'Times New Roman', Times, serif;
    margin-right: 15%;
    margin-left: 10%;
    margin-top: 15%;
  }
  

  /* Set styles for the footer area */

.copyright {
  font-size: smaller;
  text-align: center; 
}

.icons{
    color: black;
    transition: color 0.2s;
    text-decoration: none;                                         
    text-align: center; 
    display: flex;
    column-gap: 6px;
    justify-content: safe center;
    
}

.icons :hover{
    color: #aaa;
}

/*SIDEBAR HOVER*/

nav ul li:hover{
    transition: 0.3s ease;
    text-decoration: line-through;
}

nav ul li a{
  position: relative;
  display: flex;
  white-space: nowrap;
  text-decoration: none;
  color: black;
  text-align: center;
}

nav li a{
  position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
}


/* Media queries for responsiveness */

  @media screen and (max-width: 800px){

  body{
    grid-template-columns: 1fr;
    grid-template-areas: 
     "logo"
     "sidebar"
      "main"
     "footer";
     grid-template-rows: auto auto 1fr auto;
    width: 100%;
    overflow-x: hidden;
  }

  h1{
    top: 20px;
    position: relative;
    z-index: 1000;
    width: 50%;
  }


  main{
    padding: 15%;
    grid-template-columns: 1fr;
    grid-template-rows:  1fr auto;
    grid-template-areas: 
     "image"
     "bio" ;
  }

  main img{
    width: 100%;
  }

  main p{
    margin-left: 0;
    width: 100%;
  }

  nav{
      position: fixed;
      height: 100%;
      width: 100%;
      display: none;
      grid-row-start: 2;
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      margin-left: 0;
      padding-left: 0;
      background-color: white;
      overflow-x: hidden; /* Disable horizontal scroll */
      font-size: 2.5rem;

    }  

    .show{
      display: block;

    }


    footer{
      position: relative;
      bottom: 0;
      width: 100%;
      z-index: 105;
    }


.nav-links {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav a:hover, nav a:focus {
  color: #f1f1f1;
  
}


/*SVG menu button*/
#open-menu{
  display: inline-block;
  background: none;
  border: none;
  padding: 1em;
  margin-left: auto;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 45px;
  
  
}

#close-menu{
  background: none;
  border: none;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
  position: fixed;
  top: 20px;
  right: 45px;
}

  }