html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  min-width: 320px;
  background: #f8fafd;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 32px;
  height: 32px;
  margin: auto;
  animation: loader-rotate 1s linear 0s infinite;
}

#loader-circle-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #332d48;
  }

  #loader-circle-light {
    display: none;
  }
  #loader-circle-dark {
    display: block;
  }
}