.body{
  background: transparent !important;
  background-color: #000000 !important;
}

/*CUSTOM PROJECT BUTTONS*/
.btn-outline-secondary{
 color: white !important;
 background-color: rgb(33,37,41) !important;
 transition: all .2s ease-in-out !important;
 font-size: 2vmin !important;
}
.btn-outline-secondary:hover{
  transform: scale(1.2) !important;
 }

/*CUSTOM FONT*/
@font-face {
  font-family: psFont;
  src: url(../fonts/krieg-font/KriegFont-xqwj.otf);
}
@font-face{
  font-family: krypta;
  src: url(../fonts/Krypta.otf);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5vh; /* Update to 5% of viewport height */
  transition: top 0.3s ease-in-out;
}

.nav.hidden {
  top: -10%;
}

.hoverResize {
  transition: all 0.2s ease-in-out !important;
  font-size: 2vmin !important; /* Update to 2% of viewport width */
}

.hoverResize:hover {
  transform: scale(1.2) !important;
}
.nav-item{
  display: flex; justify-content: center;
}
.nav-link{
  width: auto !important;
  height: auto !important;
}

#social {
  background-color: transparent !important;
  width: 5vmin !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1250px) and (max-height: 1150px) {
  #social {
    background-color: #000000 !important;
    width: 5vmin !important;
    height: 5vmin !important;
    position: fixed !important; 
    top: 0 !important; 
    right: 0 !important;
  }
  .instagram {
    margin-top: 5vmin !important;
  }
  .youtube {
    margin-top: 10vmin !important;
  }
  .spotify {
    margin-top: 15vmin !important;
  }
}

@media (max-width: 768px) and (max-height: 1024px) {
  #social {
    width: 10vmin !important;
    height: 10vmin !important;
  }
  .instagram {
    margin-top: 10vmin !important;
  }
  .youtube {
    margin-top: 20vmin !important;
  }
  .spotify {
    margin-top: 30vmin !important;
  }
}

@media (max-width: 480px) {
  #social {
    width: 15vmin !important;
    height: 15vmin !important;
  }
  .instagram {
    margin-top: 15vmin !important;
  }
  .youtube {
    margin-top: 30vmin !important;
  }
  .spotify {
    margin-top: 45vmin !important;
  }
}



/*WAVE BACKGROUND EFFECT*/
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

/*Z POSITION*/
#one {
    position:absolute;
    z-index:999;
}


#two {
    position:absolute;
    z-index:-999;
}

/*COOKEI WARNING*/
#cookie-warning {
  font-family: Arial, Helvetica, sans-serif !important;
  background-color: #343a40;
  color: #f8f9fa;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  text-align: center;
  display: none;
}

/*NOT FOUND*/
/*

Tutorial:
https://www.roboleary.net/animation/2022/10/31/how-to-make-a-slick-animation-schitts-creek-title-sequence.html

Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP

Source code:
https://github.com/robole/title-sequences

*/

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600");

:root {
  --bar-scale-y: 0;
  --sparkle-color: rgb(253 244 215 / 40%);
}

@keyframes pop-word {
  to {
    transform: rotateX(0);
  }
}

@keyframes show {
  to {
    opacity: 1;
  }
}

@keyframes bar-scale {
  to {
    transform: scaleY(1);
  }
}

@keyframes sparkle {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1) translate(4px, 1px) rotate(8deg);
  }

  100% {
    transform: scale(0) translate(4px, 1px) rotate(8deg);
  }
}

@keyframes shimmer {
  to {
    text-shadow: 0 0 8px red;
  }
}



h2 {
  color: white;
  font-size: 8rem;
  margin-top: 9%;
  line-height: 0.85;
  perspective: 500px;
}

.word {
  display: block;

  animation: show 0.01s forwards, pop-word 1.5s forwards;
  animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
  opacity: 0;

  transform: rotateX(120deg);
  transform-origin: 50% 100%;
}

.word:nth-of-type(2) {
  padding: 0 2rem;

  animation-delay: 1.5s;

  color: white;
}

.superscript {
  position: relative;
  animation-delay: 3.6s;

  animation-duration: 0.25s;
  animation-name: shimmer;

  vertical-align: text-top;
}

/* bars */
.superscript::before {
  --bar-width: 25%;

  position: absolute;

  top: 37%;
  left: 47%;
  width: 14%;
  height: 48%;

  animation: bar-scale 0.25s linear 3s 1 forwards;

  background: linear-gradient(
    to right,
    white var(--bar-width),
    transparent var(--bar-width) calc(100% - var(--bar-width)),
    white calc(100% - var(--bar-width))
  );

  content: "";

  transform: scaleY(var(--bar-scale-y));
}

/* sparkle */
.superscript::after {
  --size: 10rem;

  position: absolute;

  top: -5%;
  left: -85%;

  width: var(--size);
  height: var(--size);

  animation: sparkle 0.4s linear 3.5s 1 forwards;

  background: radial-gradient(
      circle at center,
      rgb(252 249 241 / 94%) 0% 7%,
      transparent 7% 100%
    ),
    conic-gradient(
      transparent 0deg 18deg,
      var(--sparkle-color) 18deg,
      transparent 20deg 40deg,
      var(--sparkle-color) 40deg,
      transparent 43deg 87deg,
      var(--sparkle-color) 87deg,
      transparent 95deg 175deg,
      var(--sparkle-color) 175deg,
      transparent 178deg 220deg,
      var(--sparkle-color) 220deg,
      transparent 222deg 270deg,
      var(--sparkle-color) 270deg,
      transparent 275deg 300deg,
      var(--sparkle-color) 300deg,
      transparent 303deg 360deg
    );

  border-radius: 50%;
  clip-path: polygon(
    50% 0,
    59.13% 26.64%,
    85.13% -2.35%,
    100% 50%,
    50% 100%,
    0 50%,
    31.39% 34.86%
  );

  content: "";

  filter: blur(1px);

  transform: scale(0);
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 5rem;
  }

  /* sparkle */
  .superscript::after {
    --size: 6rem;
  }
}