@property --brand-cycle {
  syntax: "<color>";
  inherits: true;
  initial-value: #2dacf9;
}

@keyframes brand-cycle {
  0% {
    --brand-cycle: #2dacf9;
  }

  20% {
    --brand-cycle: #7ce95a;
  }

  40% {
    --brand-cycle: #ffdf5f;
  }

  60% {
    --brand-cycle: #fa73da;
  }

  80% {
    --brand-cycle: #ff3c32;
  }

  100% {
    --brand-cycle: #2dacf9;
  }
}

:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: gray transparent;
  animation: 10s linear infinite brand-cycle;
}

html, body {
  color: #dee2e6;
  background: #000;
  min-height: 100%;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  overflow-x: hidden;
}

::selection {
  color: #000;
  background: var(--brand-cycle);
}

@keyframes loading-screen-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.loading-screen-overlay picture {
  opacity: 0;
  animation: .2s ease-out .25s forwards loading-screen-appear;
}

@keyframes loading-screen-dismiss {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.loading-screen-overlay.is-dismissed {
  animation: .6s ease-out forwards loading-screen-dismiss;
}

.loading-screen-overlay.is-skipped {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --brand-cycle: #2dacf9;
    animation: none;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .loading-screen-overlay.is-dismissed {
    visibility: hidden;
    opacity: 0;
    animation: none;
  }
}