/*navbar*/


.hidden{
    display: none;
  }
  
#nav {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    z-index: 1000;
    padding: 0;
    animation: navFadeIn 2s;
  }

  #nav ul{
    display: flex;
    list-style-type:none;
    margin: 0;
    padding: 0 1em;
    justify-content: right;
  }

  #nav a:hover{
    color: var(--highlight-color);
  }

  #nav a.active{
    color: var(--highlight-color);
  }
  
  /* Navbar links */
  #nav a {
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 0.5em;
    padding: 0 0.5em;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--txt-alt);
  }

  a.active{
    color: var(--highlight-color);
  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
    display: flex;
    position: fixed;
    top: 0;
    margin: 0;
    right: 0;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 60px;
  }



  @keyframes navFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }