html[data-color-scheme='light'] {
  --logo-color: #00a0d2;
  --spinner-color: #00a0d2;
  --v-theme-surface: 255, 255, 255;
  background: rgb(var(--v-theme-surface));
}

html[data-color-scheme='dark'] {
  --logo-color: #f1f1f1;
  --spinner-color: #00a0d2;
  --v-theme-surface: 33, 33, 33;
  background: rgb(var(--v-theme-surface));
}

svg.loading-screen--logo {
  color: var(--logo-color);
}

svg.loading_screen--spinner {
  color: var(--spinner-color);
}

body {
  margin: 0;
}

.loading-screen {
  position: fixed;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: rgb(var(--v-theme-surface));
}

.loading-screen--loader {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading_screen--spinner {
  animation-name: circular-spinner;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes circular-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}