#navbar{
  position:fixed;
  width:100%;
  height:50px;
  display:flex;
  flex-direction:row;  
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background-color:rgba(0,0,0,0.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px); 
  z-index:100;
}
.logo{
  flex:0.75;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  z-index:10;
}
.PN{
  height:30px;
}
.nav-links{
  flex:3;
  display:flex;
  flex-direction:row;
  justify-content:end;
  align-items:center;
  gap:50px;
  padding-right:100px;
  
}
.navlink{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:150px;
  height:30px;
  border-width:0px;
  border-radius:15px;
  transition: hover, 0.2s;
}
.navlink:hover{
  width:175px;
  filter:
    drop-shadow(0 0 10px var(--secondary-color))
    drop-shadow(0 0 20px var(--secondary-color))
    ;
  text-decoration:underline;
}
.navlink-icon{
  width:24px;
  height:24px;
  transform: translateY(1px);
}
.contacts-button{
  flex:1;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

.hidden-navbar{
  transform:translateY(-100%);
  transition:transform 0.3s ease-in-out;
}

.shown-navbar{
  transform:translateY(0);
  transition:transform 0.3s ease-in-out;
}

/* Tablet: same layout, tighter spacing ------------------------------------- */
@media (max-width:1024px){
  .nav-links{
    gap:20px;
    padding-right:30px;
  }
  .navlink{
    width:130px;
  }
  .navlink:hover{
    width:145px;
  }
  .navlink-icon{
    width:20px;
    height:20px;
  }
  .PN{
    height:26px;
  }
}

/* Phone: text-only links, evenly spread ------------------------------------ */
@media (max-width:680px){
  #navbar{
    height:44px;
  }
  .logo{
    flex:0 0 auto;
    padding-left:8px;
  }
  .PN{
    height:20px;
  }
  .nav-links{
    flex:1;
    justify-content:space-evenly;
    gap:2px;
    padding-right:4px;
    min-width:0;
  }
  .navlink{
    width:auto;
    padding:0 3px;
    gap:4px;
  }
  .navlink:hover{
    width:auto;
  }
  .navlink-icon{
    display:none;
  }
  .navlink h3{
    font-size:0.72rem;
    white-space:nowrap;
  }
}

/* Small phone: keep all four links on screen ------------------------------- */
@media (max-width:400px){
  .logo{
    padding-left:6px;
  }
  .PN{
    height:17px;
  }
  .navlink{
    padding:0 2px;
    gap:3px;
  }
  .navlink h3{
    font-size:0.66rem;
    letter-spacing:0;
  }
}