:root{
  --main-color:rgb(120, 80, 244);
}

nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top:0;
  left:0;
  right:0;
  padding:15px 30px;
  background-color: rgba(31, 31, 31, 0.555);
  backdrop-filter: blur(10px);
  
  z-index:100;
}

nav .links-container{
  display: flex;
  justify-content: center;
}

nav .links-container a{
  color:white;
  text-decoration: 1px solid underline transparent;
  text-transform: uppercase;
  margin:0 10px;
  padding:5px 10px;
  position: relative;
}

nav .links-container a:hover::after{
  content:'';
  width:100%;
  height:3px;
  position:absolute;
  background-color: var(--main-color);
  bottom:0;
  left:0;

  animation-name: underline;
  animation-duration:0.4s;
  animation-timing-function: ease;
}

@keyframes underline{
  0%{
    width:0;
  }

  100%{
    width:100%;
  }
}

nav .links-container a:hover{
  color:var(--main-color);
  transition:0.2s ease;
}


nav .button-container button{
  padding:8px 16px;
  border-radius: 24px;
  background-color: rgb(17, 17, 17);
  font-weight: 600;
  cursor:pointer;
  transition: 0.2s ease-in-out;
  border:2px solid rgb(120, 80, 244);
}

nav .button-container button:hover{
  background-color: var(--main-color);
  box-shadow: 0 0 10px var(--main-color);
}

nav .button-container button a{
  text-transform: uppercase;
  color:white;
  text-decoration: none;
  font-size: 16px;
  font-family: Sora, Verdana;
  font-weight:700;
}

nav .logo-container .brand-logo{
  width:30px;
}

.brand-logo:hover{
  filter: drop-shadow(0 0 5px rgb(120,80,244));
  transition:0.3s ease-in-out;
}

@media screen and (width <= 800px){
  nav a{
    font-size:14px;
  }
  nav .links-container a{
    padding:3px 6px;
  }
  nav .button-container button{
    padding:6px 12px;
  }
  nav .button-container button a{
    font-size: 14px;
  }
}

@media screen and (width <= 600px){
  nav a{
    font-size:12px;
  }
  nav .button-container button a{
    font-size: 14px;
  }
  nav .links-container a{
    padding:10px 12px;
  }
  nav{
    flex-direction:column;
    gap:20px; 
  }
}
@media screen and (max-width: 400px){
  nav a{
    font-size:10px;
  }
  nav .button-container button a{
    font-size: 12px;
  }
  nav .links-container a{
    padding:8px 10px;
  }
  nav{
    flex-direction:column;
    gap:20px; 
  }
}