@import url('https://fonts.googleapis.com/css2?family=Spinnaker&display=swap');

:root{
  /*COLOR PALETTE*/
  --darkblue: #0d0826;
  --medblue: #171038;
  --linkcolor:#ff0076;
  --babyblue:#abb2ce;
  --babybluedark:#878da3;
  --brightblue:#241d5e;
  --titlebarcolor: rgb(36 29 94 /.8);
  /* -------------------- */

}


.nav-bar{
  background-color: var(--titlebarcolor);
  backdrop-filter: blur(10px);
  width: 100vw;
  height: fit-content;
  margin: 0 0 20px;
  padding: 15px;

  z-index: 2;

  display: flex;

  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 20px;
  font-style: normal;

  position: sticky;
  top:0;
  left:0;
}
.nav-bar-buffer{
  margin: 0 0 50px;
}

.nav-link{
  color: var(--babyblue);
  text-decoration: none;
  transition: 0.3s;
}
.nav-link:hover{
  color: var(--babybluedark);
}

.nav-bar > nav {
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: space-between;
  column-gap: 30px;
  align-items: center;
  right: 0;
  height: 50%;
  margin-right: 50px;
}

@media (max-width: 450px){
  .nav-link{
    font-size: 13px;
  }
  .nav-bar > nav{
    column-gap: 15px;
  }
}