@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
  color-scheme: light dark;  
  
  --dark-background-color: rgb(30, 30, 42);
  --dark-background-color-ui: rgb(50, 50, 62);
  --dark-foreground: rgb(241, 241, 255);

  --light-background-color: rgb(225, 225, 237);
  --light-background-color-ui: rgb(241, 241, 255);
  --light-foreground: rgb(30, 30, 42);

  --wave-color-1: #282830;
  --wave-color-2: #383840;
  --wave-color-3: #585860;
  --wave-color-4: #969698;

  --loader-size: 0.5em;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color: light-dark(var(--light-foreground), var(--dark-foreground));
  background-color: light-dark(var(--light-background-color), var(--dark-background-color));
  height: 100dvh;
  width: 100dvw;
}

body {
  display: grid;
  font-family: Jost, sans-serif;
  font-feature-settings: "ss01" 1;
  font-weight: 500;
  place-content: center;
  padding: 0.75em;
}

h1 {
  font-family: Jost, sans-serif;
  margin: 0;
  font-size: 1.5em;
}

@media screen and (max-width: 750px) {
  section#main {
    font-size: 1em;
  }
}

/** loader */

.loader {
  margin: 2em 0;
  width: calc(4 * var(--loader-size));
  height: calc(4 * var(--loader-size));
  position: relative;
  --c:no-repeat linear-gradient(light-dark(var(--light-foreground), var(--dark-foreground)) 0 0);
  background:
    var(--c) center/100% var(--loader-size),
    var(--c) center/var(--loader-size) 100%;
}

.loader:before {
  content:'';
  position: absolute;
  inset: 0;
  background:
    var(--c) 0    0,
    var(--c) 100% 0,
    var(--c) 0    100%,
    var(--c) 100% 100%;
  background-size: calc(1.55 * var(--loader-size)) calc(1.55 * var(--loader-size));
  animation: l16 1.5s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes l16 {
   33%  {inset:calc(-1 * var(--loader-size));transform: rotate(0deg)}
   66%  {inset:calc(-1 * var(--loader-size));transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}

/** waves */

section#background {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}