nav{
    filter: drop-shadow(0.25rem 0.25rem 0.5rem #ffff);
    width:100%;
    max-width: 100rem;
      text-align: center;
    padding: 10px;
    font-size: 8px;
    opacity: 0.8;
}

@keyframes firstShow {
    0%, 100% { transform:perspective(1000px) translate3d(0, 0, 0em); }
    50%{ transform:perspective(1000px) translate3d(0, 0, 3em); }
}

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

ul{
  position: relative;
  perspective: 1000px;
  list-style: none;
  padding-left: 0;
  box-sizing: border-box;
  border-radius: 1rem;
  transform-style: preserve-3d;
}

li{
    height: 5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    text-align: center;
    display: grid;
    background: linear-gradient(#fff, #A1A1A1), #fff;
    border-bottom: 1px solid #000;
    background-clip: padding-box;
    box-shadow: inset 0 0 1rem -0.5rem #0002;
    transition: transform 0.35s, box-shadow 0.35s, background 0.35s;
    transform: translate3d(0,0,0);
    opacity: 0;
    animation: 
      firstShow 0.5s ease-in-out,
      show 0.15s linear forwards;
    
    &:nth-child(1) { animation-delay: 0.50s; }
    &:nth-child(2) { animation-delay: 0.60s; }
    &:nth-child(3) { animation-delay: 0.70s; }
    &:nth-child(4) { animation-delay: 0.80s; }
    &:nth-child(5) { animation-delay: 0.90s; }
    &:nth-child(6) { animation-delay: 1.00s; }
    &:nth-child(7) { animation-delay: 1.10s; }
    &:nth-child(8) { animation-delay: 1.20s; }
    &:nth-child(9) { animation-delay: 1.30s; }
    
    &:first-child {
      border-radius: 1rem 1rem 0 0;
    }
    
    &:last-child {
      border-radius: 0 0 1rem 1rem;
    }
     &:hover, &:focus-within {
      transform:  translate3d(0,0,3rem);
    }
    
    &:hover + &,
    &:has(+ &:focus-within),
    &:focus + &,
    &:has(+ &:focus-within){
      box-shadow: inset 0 1rem 1rem -1rem #0003;
      transform: translate3d(0,0,2rem);
    }
    &:has(+ &:hover),
    &:has(+ &:focus-within){
      box-shadow: inset 0 -1rem 1rem -1rem #0003;
    }
    &:hover + & + &,
    &:focus-within + & + &{
      box-shadow: inset 0 1rem 0.5rem -0.75rem #0002;
    }
    &:has(+ & + &:hover),
    &:has(+ & + &:focus-within){
      box-shadow: inset 0 -1rem 0.5rem -0.75rem #0002;
    }
  }


header {
  text-align: center;
  padding: 60px 20px 40px;
}

header h1 {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 1000;
  text-align: center;
}

   h2,
  a {
    font-size: 1.8rem;
    align-items: center;
    padding: 0 1rem;
    text-decoration: none;
    color: #192339;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
  }

  h2 {
    font-size: 1.8rem;
    font-weight: 800;
  }


  @media (prefers-reduced-motion) {
  nav * {
    transition-duration: 0s ;
    animation-duration: 0s ;
  }
}

body {
  perspective: 1000px;
  position: relative;
  margin: 0;
  min-height: 75vh;
  overflow: clip;
  display: block;
  block-size: 100rem;
  place-items: center;
  transition: background 1s;
  background: #192339;
}

.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.dropdown.open {
  max-height: 500px; 
}

input[type="text"] {
  inline-size: 300px; 
  block-size: 2.5rem;  
}