@media (prefers-color-scheme: light) {
  :root {
    --main-color: #dbdbdb;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #242424;
  }
}

body {
  inset: 0; overflow: hidden;
  margin: 0; padding: 0;
  position: fixed;
  background-color: var(--main-color);
}

#loading {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

#loading img {
  animation: loading 1s infinite;
  transition: opacity .4s;
}

#loading.done img {
  animation: .33s ease-in-out 0s 1 forwards done;
  opacity: .05;
}

@keyframes loading {
  0% {
    transform: rotateY(0deg) scale(0.9);
  }
  50% {
    transform: rotateY(360deg) scale(1.1);
  }
  100% {
    transform: rotateY(720deg) scale(0.9);
  }
}

@keyframes done {
  0%  {
    transform: scale(1)
  }
  100% {
    transform: scale(10)
  }
}