@font-face {
  font-family: "Deutsch";
  src: url("/static/fonts/Deutsch.woff2") format("woff2");
}

.navbarContainer {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vh;
  background-color: #0a0b13;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  filter: drop-shadow(2px 2px 4px #101230);
}
.navbarNameplate {
  position: fixed;
  top: -0.5vh;
  left: 9vh;
  font-family: "Deutsch", sans-serif;
  font-size: 4vh;
  font-weight: lighter;
  color: #d7c8fb;
  text-shadow: 2px 2px 4px #3a1ed6;
}
.navbarLogo {
  position: fixed;
  top: 1.5vh;
  left: 15px;
  width: 5vw;
  height: 5vh;
  background-image: url(/static/images/logo.webp);
  background-size: contain;
  background-repeat: no-repeat;
  filter: hue-rotate(270deg) drop-shadow(0px 0px 6px #820bd6);
}

.navbarLinksContainer {
  position: fixed;
  top: 0;
  left: 0;
}
.navbarLinks_sc {
  position: fixed;
  left: 93vw;
  top: 1.5vh;
  width: 5vw;
  height: 5vh;
  background-image: url(/static/images/soundcloud.svg);
  background-size: contain;
  background-repeat: no-repeat;
  filter: hue-rotate(270deg) brightness(1.7) drop-shadow(0px 0px 6px #820bd6);
  transition: all 0.3s ease;
}
.navbarLinks_yt {
  position: fixed;
  top: 1.5vh;
  left: 86vw;
  width: 5vw;
  height: 5vh;
  background-image: url(/static/images/youtube.svg);
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(78%) sepia(94%) saturate(1343%) hue-rotate(233deg)
    brightness(102%) contrast(103%) drop-shadow(0px 0px 6px #820bd6);
  transition: all 0.3s ease;
}

.navbarLinks_sc:hover {
  left: 92.5vw;
  top: 1vh;
  width: 6vw;
  height: 6vh;
  filter: hue-rotate(270deg) brightness(1.7) drop-shadow(0px 0px 6px #b682dbc2);
}
.navbarLinks_yt:hover {
  left: 85.5vw;
  top: 1vh;
  width: 6vw;
  height: 6vh;
  filter: invert(78%) sepia(94%) saturate(1343%) hue-rotate(233deg)
    brightness(102%) contrast(103%) drop-shadow(0px 0px 6px #b682dbc2);
}

@media (max-width: 768px) {
  .navbarLogo {
    width: 10vw;
    height: 5vh;
  }
  .navbarLinks_sc {
    top: 1.5vh;
    left: 85vw;
    width: 10vw;
    height: 5vh;
  }
  .navbarLinks_sc:hover{
    top: 1vh;
    left: 84vw;
    width: 11vw;
    height: 6vh;
  }
  .navbarLinks_yt {
    top: 1.6vh;
    left: 72vw;
    width: 9vw;
    height: 5vh;
  }
  .navbarLinks_yt:hover{
    top: 1vh;
    left: 71.5vw;
    width: 10vw;
    height: 6vh;
  }
}