body {
  font-family: "Rubik", "Helvetica", "Arial", "sans-serif" !important;
  color: white;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn {
  font-family: "Rubik" !important;
}

.back1 {
  background-color: #151515 !important;
}

.back2 {
  background-color: black !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* At the beginning of the animation, div is transparent */
  }
  100% {
    opacity: 1; /* At the end of the animation, div is fully opaque */
  }
}
@keyframes moveUp {
  0% {
    transform: translateY(50px); /* At the beginning of the animation, div is 50px down */
  }
  100% {
    transform: translateY(0); /* At the end of the animation, div is back to its original position */
  }
}
.card.card1 {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.2px);
  -webkit-backdrop-filter: blur(12.2px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 1; /* Start with a transparent div */
}

.card.card2 {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18.2px);
  -webkit-backdrop-filter: blur(18.2px);
  border: 2px solid rgba(66, 66, 66, 0.86);
  opacity: 1;
}

.card.staticcard {
  /* From https://css.glass */
  background: rgba(70, 0, 69, 0.6);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.2px);
  -webkit-backdrop-filter: blur(9.2px);
}

.big-icon {
  font-size: 3.5rem !important;
  width: 7rem !important;
  height: 7rem !important;
}

.vignette {
  position: relative;
}

.vignette2 {
  position: relative;
}

.in-front {
  position: relative;
  z-index: 1000;
}

.yellow-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(255, 255, 0, 0.4) 0%, rgb(255, 255, 0) 30%, rgb(255, 255, 0) 70%, rgba(255, 255, 0, 0.4) 100%);
  z-index: 1000; /* Adjust the z-index as needed */
}

.vignette::before {
  content: "";
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 200px 300px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.vignette2::before {
  content: "";
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px -25px 100px max(500px, 24vw) rgba(255, 255, 0, 0.69);
  pointer-events: none;
}

a {
  color: rgb(255, 34, 231);
  text-decoration: underline;
}

.modal {
  z-index: 10000;
  color: white;
  --bs-modal-bg: #2b2b2b;
}

.pulse-button {
  box-shadow: 0 0 0 rgba(0, 40, 255, 0.2);
  animation: pulseme 2s infinite;
}

@keyframes pulseme {
  0% {
    box-shadow: 0 0 0 rgba(0, 40, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 40, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 40, 255, 0.2);
  }
}
.big-header-text {
  color: #FFF;
  font-size: clamp(24px, 3.5vw, 68px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -2px;
}

.small-header-text {
  color: #FFF;
  font-size: 20px;
  font-size: clamp(14px, 2vw, 20px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
}

.hilite-big {
  color: #FFF;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px; /* 123.81% */
}

.hilite-small {
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.video-lg {
  font-size: clamp(42px, 5.5vw, 70px);
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 114.286% */
  letter-spacing: 0px;
}

.video-sm {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
  opacity: 0.7;
}

.video-subtext-lg {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
}

.video-subtext-sm {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  opacity: 0.7;
}

.title-lg {
  font-size: clamp(28px, 3.5vw, 42px);
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 114.286% */
  letter-spacing: 0px;
}

.title-sm {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  opacity: 0.7;
}

@keyframes spinAndPulse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.05);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  75% {
    transform: rotate(270deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.spin-pulse {
  animation: spinAndPulse 2s linear infinite;
}