nav{
  background-color: var(--background-color);
  border-bottom: 1px solid var(--hover-color);
  position: fixed;
  width: 100%;
  margin: 0 ;
  z-index: 10;
  height: fit-content;
}
nav ul{
  list-style: none;
  display: flex;
  width: 80%;
  margin-left: 10%;
}
nav .home-li{
  margin-right: auto;
}
nav li{
  display: flex;
}
nav a{
  display: flex;
  text-decoration: none;
  color: var(--text-color);
  
  transition: var(--background-color) 150ms ease;
}
nav .goto-navbar{
  padding: 1em;

}
nav .goto-navbar:hover{
  background-color: var(--hover-color);
}
nav a.active-link{
  border-bottom: 2px solid var(--text-color);
}

#open-sidebar-button{
  display: none;
  background: none;
  border: none;
  padding: 1em;
  margin-left: auto;
  cursor: pointer;
}
#close-sidebar-button{
  display: none;
  background: none;
  border: none;
  padding: 1em;
  cursor: pointer;
}
#overlay{
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
}

.logo-navbar{
  margin: auto;
  width:  clamp(55px, 4vw, 100px);
  height: auto;
  margin-left: 15px;
}

.navbar-responsive-bar{
  display: none;
}
@media screen and (max-width: 990px) {
  #open-sidebar-button, #close-sidebar-button{
    display: block;
  }
  #open-sidebar-button svg{
    padding-bottom: 10px;
  }
  nav{
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(15em, 100%);
    z-index: 10;
    border-left: 1px solid var(--hover-color);
    transition: right 300ms ease-in-out;
  }
  nav.show{
    right: 0;
  }
  nav.show ~ #overlay{
    display: block;
  }
  nav ul{
    width: 100%;
    flex-direction: column;
  }
  nav a{
    width: 100%;
    padding-left: 2.5em;
  }
  nav a.active-link{
    border-bottom: none;
  }
  nav .home-li{
    margin-right: unset;
    display: none;
  }
  .navbar-responsive-bar{
    width: 100%;
    background-color: var(--background-color);
    display: flex;
    height: fit-content;
    border-bottom: 1px solid var(--hover-color);
    position: fixed;
    z-index: 10;
  }
  nav ul{
  list-style: none;
  display: flex;
  width: 100%;
  margin-left: 0;
  }
  nav .goto-navbar{
    border-bottom: 1px solid var(--hover-color);
  }
  nav .first-link{
    border-top: 1px solid var(--hover-color);
  }

  .logo-navbar{
    margin-top: 5px;
    width: auto;
    height: 60px;
    margin-left: 15px;
  }

}