:root {
  --loader-color: #f5f5f0;
  --loader-size: 8px;
  --loader-time: 1s;
}

@media (min-width: 480px) {
  :root {
    --loader-size: 10px;
  }
}

@media (min-width: 768px) {
  :root {
    --loader-size: 12px;
  }
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #090707;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.dank-ass-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center;
  transform: scale(0.85);
}

@media (min-width: 480px) {
  .dank-ass-loader {
    transform: scale(0.9);
  }
}

@media (min-width: 768px) {
  .dank-ass-loader {
    transform: scale(1);
  }
}

.dank-ass-loader .row {
  display: flex;
}

.arrow {
  width: 0;
  height: 0;
  margin: 0 calc(var(--loader-size) / -2);
  border-left: var(--loader-size) solid transparent;
  border-right: var(--loader-size) solid transparent;
  border-bottom: calc(var(--loader-size) * 1.8) solid var(--loader-color);
  animation: blink var(--loader-time) infinite;
  filter: drop-shadow(0 0 calc(var(--loader-size) * 1.5) var(--loader-color));
}

.arrow.down {
  transform: rotate(180deg);
}

.arrow.outer-1 { animation-delay: calc(var(--loader-time) / -18 * 1); }
.arrow.outer-2 { animation-delay: calc(var(--loader-time) / -18 * 2); }
.arrow.outer-3 { animation-delay: calc(var(--loader-time) / -18 * 3); }
.arrow.outer-4 { animation-delay: calc(var(--loader-time) / -18 * 4); }
.arrow.outer-5 { animation-delay: calc(var(--loader-time) / -18 * 5); }
.arrow.outer-6 { animation-delay: calc(var(--loader-time) / -18 * 6); }
.arrow.outer-7 { animation-delay: calc(var(--loader-time) / -18 * 7); }
.arrow.outer-8 { animation-delay: calc(var(--loader-time) / -18 * 8); }
.arrow.outer-9 { animation-delay: calc(var(--loader-time) / -18 * 9); }
.arrow.outer-10 { animation-delay: calc(var(--loader-time) / -18 * 10); }
.arrow.outer-11 { animation-delay: calc(var(--loader-time) / -18 * 11); }
.arrow.outer-12 { animation-delay: calc(var(--loader-time) / -18 * 12); }
.arrow.outer-13 { animation-delay: calc(var(--loader-time) / -18 * 13); }
.arrow.outer-14 { animation-delay: calc(var(--loader-time) / -18 * 14); }
.arrow.outer-15 { animation-delay: calc(var(--loader-time) / -18 * 15); }
.arrow.outer-16 { animation-delay: calc(var(--loader-time) / -18 * 16); }
.arrow.outer-17 { animation-delay: calc(var(--loader-time) / -18 * 17); }
.arrow.outer-18 { animation-delay: calc(var(--loader-time) / -18 * 18); }

.arrow.inner-1 { animation-delay: calc(var(--loader-time) / -6 * 1); }
.arrow.inner-2 { animation-delay: calc(var(--loader-time) / -6 * 2); }
.arrow.inner-3 { animation-delay: calc(var(--loader-time) / -6 * 3); }
.arrow.inner-4 { animation-delay: calc(var(--loader-time) / -6 * 4); }
.arrow.inner-5 { animation-delay: calc(var(--loader-time) / -6 * 5); }
.arrow.inner-6 { animation-delay: calc(var(--loader-time) / -6 * 6); }

@keyframes blink {
  0% { opacity: 0.1; }
  30% { opacity: 1; }
  100% { opacity: 0.1; }
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Hide player text links */
#cstrFreePlayerBL1, #cstrFreePlayerBL2 {
  display: none !important;
}

/* Hide content until loaded */
.content-container {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.content-loaded {
  opacity: 1;
}