:root {
  --color-background-root: #fbfaff;
  --color-spinner: #8f8c96;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background-root: #161520;
    --color-spinner: #93bfec;
  }
}

@font-face {
  font-family: "Averta-Bold";
  src: url("fonts/Averta-Bold.woff2") format("woff2"),
    url("fonts/Averta-Bold.woff") format("woff");
}

@font-face {
  font-family: "Averta-Semibold";
  src: url("fonts/Averta-Semibold.woff2") format("woff2"),
    url("fonts/Averta-Semibold.woff") format("woff");
}

@font-face {
  font-family: "Averta-Regular";
  src: url("fonts/Averta-Regular.woff2") format("woff2"),
    url("fonts/Averta-Regular.woff") format("woff");
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  touch-action: none;
  overflow-x: hidden;
  user-select: text;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  touch-action: manipulation;
  display: flex;
  flex: 1;
  background: var(--color-background-root);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#splash {
  opacity: 0;
  position: absolute;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex: 1;
  background: var(--color-background-root);
  justify-content: flex-end;
  align-items: flex-end;
  animation: fade-in ease 0.5s forwards;
  animation-delay: 300ms;
}

@keyframes splash-loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes splash-loading-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

#splash-loading {
  animation: splash-loading-rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
}

#splash-loading-path {
  stroke: var(--color-spinner);
  stroke-linecap: round;
  animation: splash-loading-dash 1.5s ease-in-out infinite;
}
