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

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn {
  font-family: "Karla" !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(0, 0, 0, 0.45);
  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;
}

.vignette3 {
  position: relative;
}

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

.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 305px rgba(1, 9, 0, 0.9);
  pointer-events: none;
}

.vignette3::before {
  content: "";
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px -25px 100px 1305px rgba(1, 9, 0, 0.9);
  pointer-events: none;
}

a {
  color: #00C2FF;
  text-decoration: underline;
}

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

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

@keyframes pulseme {
  0% {
    box-shadow: 0 0 0 rgba(0, 255, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 255, 0, 0.2);
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}