@font-face {
  font-family: pixelsFont;
  src: url(../src/sprites/GemunuLibre-VariableFont_wght.ttf);
  font-weight: 600;
  font-display: swap;
}
body {
  overflow: hidden;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
div#stats {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 500;
  width: max(200px, 10vw, 10vh);
  height: max(100px, 6vh, 6vw);
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}
#loader {
  width: 45px;
  height: 30px;
  background: linear-gradient(#ff3b66 0 0) 0 100%/100% 50%,
    linear-gradient(#ff3b66 0 0) 0 0 / calc(100% / 3) 100%;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0 0 0);
  animation: l2-0 2s infinite steps(4);
}
#loader:before,
#loader:after {
  content: "";
  position: absolute;
  top: -50%;
  right: 0;
  bottom: 50%;
  left: 0;
  background: linear-gradient(#00ee1e 0 0) 0 0 / calc(2 * 100% / 3) 50%,
    linear-gradient(#00ee1e 0 0) 100% 100% / calc(2 * 100% / 3) 50%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l2-1;
}
#loader:after {
  top: -100%;
  right: 0;
  bottom: 100%;
  left: 0;
  background: linear-gradient(#00d1ff 0 0) 0 0/100% 50%,
    linear-gradient(#00d1ff 0 0) 100% 0 / calc(100% / 3) 100%;
  background-repeat: no-repeat;
  animation-name: l2-2;
}
@keyframes l2-0 {
  0% {
    transform: translateY(-250%);
    clip-path: inset(100% 0 0 0);
  }
  25%,
  to {
    transform: translateY(0);
    clip-path: inset(-100% 0 0 0);
  }
}
@keyframes l2-1 {
  0%,
  25% {
    transform: translateY(-250%);
  }
  50%,
  to {
    transform: translateY(0);
  }
}
@keyframes l2-2 {
  0%,
  50% {
    transform: translateY(-250%);
  }
  75%,
  to {
    transform: translateY(0);
  }
}
