nav{
    background-color: var(--primary-color);
    border-bottom:1px solid var(--hover-color);
    position: fixed;
    width: 100%;
    top:0;

    
    ul, li{
      /* list-style:none; */
      display:flex;
    }
    .home-li{
      margin-right:auto;
    }
    .active-link{
      border-bottom:2px solid var(--text-color);
    }
    .menu-button{
      display:none;
    }
    a{
        display:flex;
        text-decoration:none;
        color:var(--text-color);
        padding:1em 2em;
        transition: background-color 150ms ease;
      }
      a.accent-link{
        background-color:var(--accent-color);
        /* color:var(--text-color); */
        margin-top:auto;
      }
      a:hover{
        background-color:var(--hover-color);
      }

  }
  .overlay{
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    inset: 0;
    display: none;
  }
  


  @media screen and (max-width:700px){
    nav{
      z-index:10;
      .menu-button {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: var(--MenuIconSize);
        height: var(--MenuIconSize);
        margin-left:auto;
        padding-right:10px;
        z-index:10;
        position: relative;
        
    }
      
    }
    nav ul.show{
      right:0;
    }
    nav:has(ul.show) ~ .overlay{
      display: block;
    }
      nav ul{
        background-color: var(--primary-color);
        width:100%;
        flex-direction:column;
        position:fixed;
        top:var(--MenuIconSize);
        z-index:10;
        right:-100%;
        height:100vh;
        width:min(15em,100%);
        border-left:1px solid var(--hover-color);
        border-top:1px solid var(--hover-color);
        transition: right 300ms ease-out;
      }
      nav a{
        width:100%;
        padding-left:2.5em;
      }
      nav a.active-link{
        border-bottom:none;
      }
      nav .home-li{
        margin-right:unset;
      }
    .bar{
      width: var(--MenuIconSize);
      height: var(--MenuIconBarHeight);
  
      background-color: var(--text-color);
      border-radius: 80px;
      transition-duration: .5s;
  }
  
  #Sidebar-btn:checked ~ .menu-button > #bar1{
      animation-name: topdown1;
      opacity: 0;
  }
  #Sidebar-btn:checked ~ .menu-button > #bar2{  
      animation-name: topdown2;
      transform-origin: center left;
      transform: translate(15%,-238%) rotate(45deg);
  }
  #Sidebar-btn:checked ~ .menu-button > #bar3{
      animation-name: topdown3;
      transform-origin: center right;
      transform: translate(-15%,-460%) rotate(-45deg);
  }
}