:root {
  --background: hsla(183, 18%, 89%, 1);
  --text-color: hsla(0, 0%, 16%, 1);
  --link-color: hsla(208, 92%, 28%, 1);
}

html, body {
  background: var(--background);
  color: var(--text-color);
}

#splash {
  min-height: 100svh;
  background: hsl(203, 23%, 95%);
  animation: splash_bg forwards 250ms 0.7s ease-out;
  font-family: "Inter Var", "Inter V", "Inter";
}
#splash header {
  width: 100%;
  text-align: center;
  padding-top: 1.2rem;
  color: hsl(0, 0%, 19%);
}
#splash div.headline {
  width: 100%;
  height: 80svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
#splash div.headline h1 {
  font-size: 6vw;
}
#splash div.headline h2 {
  font-weight: 500;
  font-size: 5vw;
}
@keyframes splash_bg {
  from {
    background: hsl(203, 23%, 95%);
  }
  to {
    background: hsl(213, 11%, 11%);
  }
}