body {
  overflow: hidden;
}

.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
  transition: opacity 1s ease;
}

#navbar {
  position: static;
}
@media (min-width: 768px) {
  #navbar {
    position: fixed;
    width: 100%;
  }
}

@keyframes light_text {
  0% {
    text-shadow: 0 0 30px #424242, 0 0 60px #424242, 0 0 90px #424242;
  }
  50% {
    text-shadow: 0 0 40px #424242, 0 0 10px #424242;
  }
}
#text-info, #text-credits {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
@media (max-width: 576px) {
  #text-info, #text-credits {
    font-size: 0.8rem;
  }
}
@keyframes ujjuako {
  0% {
    text-shadow: rgb(143, 25, 25) 0 0 30px, rgb(143, 25, 25) 0 0 60px, rgb(143, 25, 25) 0 0 90px;
  }
  50% {
    text-shadow: rgb(143, 25, 25) 0 0 20px, rgb(143, 25, 25) 0 0 50px, rgb(143, 25, 25) 0 0 80px;
  }
  100% {
    text-shadow: rgb(143, 25, 25) 0 0 30px, rgb(143, 25, 25) 0 0 60px, rgb(143, 25, 25) 0 0 90px;
  }
}
#text-info > *, #text-credits > * {
  user-select: none;
}
#text-info > *:nth-child(1), #text-credits > *:nth-child(1) {
  color: #853131;
  animation: ujjuako 5s ease-in-out infinite;
}
#text-info > *:nth-child(2), #text-credits > *:nth-child(2) {
  position: absolute;
  top: 0;
  z-index: 6;
  color: #853131;
  text-shadow: #2a0707 0.5px 0.5px 0.5px, #853131 -0.5px -0.5px 0.5px;
}
#text-info > *:nth-child(3), #text-credits > *:nth-child(3) {
  position: absolute;
  top: 0;
  z-index: 7;
}
#text-info > *:nth-child(3) > *, #text-credits > *:nth-child(3) > * {
  color: transparent;
  background: repeating-linear-gradient(90deg, #2a0707, rgb(131, 131, 131) 0.12em, rgb(131, 131, 131) 0.2em, rgb(131, 131, 131) 0.28em, #2a0707 0.4em), repeating-linear-gradient(0deg, #2a0707, rgb(131, 131, 131) 0.09em, rgb(131, 131, 131) 0.15em, rgb(131, 131, 131) 0.21em, #2a0707 0.3em);
  mask-image: url("../images/noise.31f4288471a5.svg");
  filter: contrast(500%) blur(0.4px);
  background-clip: text;
}
#text-info > *:nth-child(3) > *::after, #text-credits > *:nth-child(3) > *::after {
  background: url("../images/noise.31f4288471a5.svg");
  opacity: 1;
}
#text-info a, #text-credits a {
  color: inherit;
  text-decoration: none;
}

#product-list div, #text-start-launch, #text-telegram-channel, #sales-countdown {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
@media (max-width: 576px) {
  #product-list div, #text-start-launch, #text-telegram-channel, #sales-countdown {
    font-size: 0.8rem;
  }
}
@keyframes ujjualg {
  0% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
  50% {
    text-shadow: rgb(154, 154, 154) 0 0 20px, rgb(154, 154, 154) 0 0 50px, rgb(154, 154, 154) 0 0 80px;
  }
  100% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
}
#product-list div > *, #text-start-launch > *, #text-telegram-channel > *, #sales-countdown > * {
  user-select: none;
}
#product-list div > *:nth-child(1), #text-start-launch > *:nth-child(1), #text-telegram-channel > *:nth-child(1), #sales-countdown > *:nth-child(1) {
  color: #b9b3b3;
  animation: ujjualg 5s ease-in-out infinite;
}
#product-list div > *:nth-child(2), #text-start-launch > *:nth-child(2), #text-telegram-channel > *:nth-child(2), #sales-countdown > *:nth-child(2) {
  position: absolute;
  top: 0;
  z-index: 6;
  color: #b9b3b3;
  text-shadow: #1f1f1f 0.5px 0.5px 0.5px, #b9b3b3 -0.5px -0.5px 0.5px;
}
#product-list div > *:nth-child(3), #text-start-launch > *:nth-child(3), #text-telegram-channel > *:nth-child(3), #sales-countdown > *:nth-child(3) {
  position: absolute;
  top: 0;
  z-index: 7;
}
#product-list div > *:nth-child(3) > *, #text-start-launch > *:nth-child(3) > *, #text-telegram-channel > *:nth-child(3) > *, #sales-countdown > *:nth-child(3) > * {
  color: transparent;
  background: repeating-linear-gradient(90deg, #1f1f1f, rgb(255, 255, 255) 0.12em, rgb(255, 255, 255) 0.2em, rgb(255, 255, 255) 0.28em, #1f1f1f 0.4em), repeating-linear-gradient(0deg, #1f1f1f, rgb(255, 255, 255) 0.09em, rgb(255, 255, 255) 0.15em, rgb(255, 255, 255) 0.21em, #1f1f1f 0.3em);
  mask-image: url("../images/noise.31f4288471a5.svg");
  filter: contrast(500%) blur(0.4px);
  background-clip: text;
}
#product-list div > *:nth-child(3) > *::after, #text-start-launch > *:nth-child(3) > *::after, #text-telegram-channel > *:nth-child(3) > *::after, #sales-countdown > *:nth-child(3) > *::after {
  background: url("../images/noise.31f4288471a5.svg");
  opacity: 1;
}

#text-subscribe {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
@media (max-width: 576px) {
  #text-subscribe {
    font-size: 0.8rem;
  }
}
@keyframes ujjuam0 {
  0% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
  50% {
    text-shadow: rgb(154, 154, 154) 0 0 20px, rgb(154, 154, 154) 0 0 20px, rgb(154, 154, 154) 0 0 50px, rgb(154, 154, 154) 0 0 80px;
  }
  100% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
}
#text-subscribe > * {
  user-select: none;
}
#text-subscribe > *:nth-child(1) {
  color: #b9b3b3;
  animation: ujjuam0 5s ease-in-out infinite;
}
#text-subscribe > *:nth-child(2) {
  position: absolute;
  top: 0;
  z-index: 6;
  color: #b9b3b3;
  text-shadow: #1f1f1f 0.5px 0.5px 0.5px, #b9b3b3 -0.5px -0.5px 0.5px;
}
#text-subscribe > *:nth-child(3) {
  position: absolute;
  top: 0;
  z-index: 7;
}
#text-subscribe > *:nth-child(3) > * {
  color: transparent;
  background: repeating-linear-gradient(90deg, #1f1f1f, rgb(255, 255, 255) 0.12em, rgb(255, 255, 255) 0.2em, rgb(255, 255, 255) 0.28em, #1f1f1f 0.4em), repeating-linear-gradient(0deg, #1f1f1f, rgb(255, 255, 255) 0.09em, rgb(255, 255, 255) 0.15em, rgb(255, 255, 255) 0.21em, #1f1f1f 0.3em);
  mask-image: url("../images/noise.31f4288471a5.svg");
  filter: contrast(500%) blur(0.4px);
  background-clip: text;
}
#text-subscribe > *:nth-child(3) > *::after {
  background: url("../images/noise.31f4288471a5.svg");
  opacity: 1;
}

#big-logo {
  animation-name: light;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
  width: 500px;
}
@keyframes light {
  0% {
    filter: drop-shadow(0px 0px 60px #424242) drop-shadow(0px 0px 10px #424242);
  }
  50% {
    filter: drop-shadow(0px 0px 40px #424242) drop-shadow(0px 0px 10px #424242);
  }
  100% {
    filter: drop-shadow(0px 0px 60px #424242) drop-shadow(0px 0px 10px #424242);
  }
}
@media (hover: none) and (pointer: coarse) {
  #big-logo {
    transition: none;
    will-change: none;
  }
}

#big-logo-start {
  animation-name: light;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter: brightness(50%);
  width: 500px;
}
@keyframes light {
  0% {
    filter: drop-shadow(0px 0px 60px #1f011a) drop-shadow(0px 0px 10px #1f011a);
  }
  50% {
    filter: drop-shadow(0px 0px 40px #1f011a) drop-shadow(0px 0px 10px #1f011a);
  }
  100% {
    filter: drop-shadow(0px 0px 60px #1f011a) drop-shadow(0px 0px 10px #1f011a);
  }
}

#logo-container {
  width: 50%;
}
@media (min-width: 768px) {
  #logo-container {
    width: max-content;
  }
}

@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  6.67% {
    transform: translate(3px, -2px);
  }
  13.33% {
    transform: translate(-4px, 1px);
  }
  20.00% {
    transform: translate(2px, -5px);
  }
  26.67% {
    transform: translate(-1px, 4px);
  }
  33.33% {
    transform: translate(5px, -3px);
  }
  40.00% {
    transform: translate(-2px, 2px);
  }
  46.67% {
    transform: translate(1px, -4px);
  }
  53.33% {
    transform: translate(-3px, 5px);
  }
  60.00% {
    transform: translate(4px, -1px);
  }
  66.67% {
    transform: translate(-5px, 3px);
  }
  73.33% {
    transform: translate(2px, -2px);
  }
  80.00% {
    transform: translate(-1px, 5px);
  }
  86.67% {
    transform: translate(4px, -3px);
  }
  93.33% {
    transform: translate(-3px, 1px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.skull {
  position: absolute;
  z-index: 1;
  animation-name: float;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
.skull:nth-child(1) {
  top: 30%;
  left: 110%;
  animation-delay: -2s;
}
.skull:nth-child(1) img {
  height: 70px;
  opacity: 0.5;
}
.skull:nth-child(2) {
  top: 50%;
  left: 100%;
  animation-delay: -4s;
}
.skull:nth-child(2) img {
  height: 60px;
  opacity: 1;
}
.skull:nth-child(3) {
  top: 70%;
  left: 110%;
  animation-delay: -1s;
}
.skull:nth-child(3) img {
  height: 80px;
  opacity: 0.75;
}
.skull:nth-child(4) {
  top: 30%;
  right: 115%;
  animation-delay: -3s;
}
.skull:nth-child(4) img {
  height: 70px;
  opacity: 1;
}
.skull:nth-child(5) {
  top: 50%;
  right: 100%;
  animation-delay: -5s;
}
.skull:nth-child(5) img {
  height: 80px;
  opacity: 0.5;
}
.skull:nth-child(6) {
  top: calc(70% + 15px);
  right: 113%;
  animation-delay: -12s;
}
.skull:nth-child(6) img {
  height: 60px;
  opacity: 0.75;
}
@media (max-width: 576px) {
  .skull:nth-child(1) {
    top: 10%;
    left: 110%;
    animation-delay: -2s;
  }
  .skull:nth-child(1) img {
    height: 45px;
    opacity: 0.5;
  }
  .skull:nth-child(2) {
    top: 40%;
    left: 100%;
    animation-delay: -4s;
  }
  .skull:nth-child(2) img {
    height: 35px;
    opacity: 1;
  }
  .skull:nth-child(3) {
    top: 70%;
    left: 110%;
    animation-delay: -1s;
  }
  .skull:nth-child(3) img {
    height: 55px;
    opacity: 0.75;
  }
  .skull:nth-child(4) {
    top: 10%;
    right: 115%;
    animation-delay: -3s;
  }
  .skull:nth-child(4) img {
    height: 45px;
    opacity: 1;
  }
  .skull:nth-child(5) {
    top: 40%;
    right: 100%;
    animation-delay: -5s;
  }
  .skull:nth-child(5) img {
    height: 55px;
    opacity: 0.5;
  }
  .skull:nth-child(6) {
    top: calc(70% + 15px);
    right: 113%;
    animation-delay: -12s;
  }
  .skull:nth-child(6) img {
    height: 35px;
    opacity: 0.75;
  }
}

#imp {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.form-range:focus {
  outline: none !important;
  box-shadow: none !important;
}
.form-range:active {
  box-shadow: none !important;
}
.form-range::-webkit-slider-thumb:focus {
  box-shadow: none !important;
}
.form-range::-moz-range-thumb:focus {
  box-shadow: none !important;
}
.form-range::-ms-thumb:focus {
  box-shadow: none !important;
}

#title-container {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

@keyframes marquee-with-pause {
  0%, 10% {
    transform: translateX(0);
  }
  45%, 55% {
    transform: translateX(calc(0px - var(--scroll-width)));
  }
  90%, 100% {
    transform: translateX(0);
  }
}
#song-title {
  display: inline-block;
  padding-right: 50px;
  white-space: nowrap;
  animation: marquee-with-pause 12s ease-in-out infinite;
}

.toast {
  z-index: 3;
}

iframe {
  background-color: rgba(0, 0, 0, 0);
}

#emailButton {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 30px;
  background-color: #0a0a0a;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 15px #000, 0 0 5px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
#emailButton > span {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
@media (max-width: 576px) {
  #emailButton > span {
    font-size: 0.8rem;
  }
}
@keyframes ujjuamz {
  0% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
  50% {
    text-shadow: rgb(154, 154, 154) 0 0 20px, rgb(154, 154, 154) 0 0 50px, rgb(154, 154, 154) 0 0 80px;
  }
  100% {
    text-shadow: rgb(154, 154, 154) 0 0 30px, rgb(154, 154, 154) 0 0 60px, rgb(154, 154, 154) 0 0 90px;
  }
}
#emailButton > span > * {
  user-select: none;
}
#emailButton > span > *:nth-child(1) {
  color: #b9b3b3;
  animation: ujjuamz 5s ease-in-out infinite;
}
#emailButton > span > *:nth-child(2) {
  position: absolute;
  top: 0;
  z-index: 6;
  color: #b9b3b3;
  text-shadow: #1f1f1f 0.5px 0.5px 0.5px, #b9b3b3 -0.5px -0.5px 0.5px;
}
#emailButton > span > *:nth-child(3) {
  position: absolute;
  top: 0;
  z-index: 7;
}
#emailButton > span > *:nth-child(3) > * {
  color: transparent;
  background: repeating-linear-gradient(90deg, #1f1f1f, rgb(255, 255, 255) 0.12em, rgb(255, 255, 255) 0.2em, rgb(255, 255, 255) 0.28em, #1f1f1f 0.4em), repeating-linear-gradient(0deg, #1f1f1f, rgb(255, 255, 255) 0.09em, rgb(255, 255, 255) 0.15em, rgb(255, 255, 255) 0.21em, #1f1f1f 0.3em);
  mask-image: url("../images/noise.31f4288471a5.svg");
  filter: contrast(500%) blur(0.4px);
  background-clip: text;
}
#emailButton > span > *:nth-child(3) > *::after {
  background: url("../images/noise.31f4288471a5.svg");
  opacity: 1;
}
#emailButton::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  border-radius: 29px 29px 0 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
  filter: blur(1px);
  opacity: 0.8;
}
#emailButton::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  height: 30%;
  border-radius: 0 0 29px 29px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  filter: blur(1px);
  opacity: 0.6;
}
#emailButton:hover {
  background-color: rgb(22.75, 22.75, 22.75);
  box-shadow: 0 0 20px #000, 0 0 7px rgba(0, 0, 0, 0.4) inset;
}
#emailButton:active {
  background-color: black;
  box-shadow: 0 0 10px #000, 0 0 10px rgba(0, 0, 0, 0.4) inset;
  transform: translateY(1px);
}

#telegram-link {
  animation: telegram-glow 6s ease-in-out infinite;
}
@keyframes telegram-glow {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
