body {
  margin: 0;
}

html {
  overflow: hidden scroll;
}

#loader-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--loader-background, #121317);
  block-size: 100%;
  inline-size: 100%;
}

#loader {
  --loader-size: 100px;
  --loader-thick-pos: calc(var(--loader-size) / 15);
  --loader-thick-neg: calc(var(--loader-size) / -15);
  --ltp: var(--loader-thick-pos);
  --ltn: var(--loader-thick-neg);
  width: var(--loader-size);
  height: var(--loader-size);
  border-radius: 50%;
  color: var(--loader-primary, #0a2);
  transform: rotateZ(45deg);
  perspective: 1000px;
}

#loader::before,
#loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1.05s spin linear infinite;
}

#loader::after {
  animation-duration: 0.85s;
}

#loader::before {
  color: var(--loader-surface, #f8fafc);
  transform: rotateY(70deg);
}

@keyframes spin {
  0%,
  100% {
    box-shadow: var(--ltp) 0 0 0 currentcolor;
  }

  12.5% {
    box-shadow: var(--ltp) var(--ltp) 0 0 currentcolor;
  }

  25% {
    box-shadow: 0 var(--ltp) 0 0 currentcolor;
  }

  37.5% {
    box-shadow: var(--ltn) var(--ltp) 0 0 currentcolor;
  }

  50% {
    box-shadow: var(--ltn) 0 0 0 currentcolor;
  }

  62.5% {
    box-shadow: var(--ltn) var(--ltn) 0 0 currentcolor;
  }

  75% {
    box-shadow: 0 var(--ltn) 0 0 currentcolor;
  }

  87.5% {
    box-shadow: var(--ltp) var(--ltn) 0 0 currentcolor;
  }
}