:root {
  --midnight: #0b101c;
  --moon: #dce4f0;
  --dusk: #8b97aa;
  --mute: #66748a;
  --flame: #ff8fb3;
  --rose: #c46b86;
  --frog: 64px;
  --frog-sheet: 256px;
  --font-name: "Press Start 2P", "Courier New", Courier, monospace;
  --font-body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
    monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  background: var(--midnight);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--midnight);
  color: var(--moon);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #2a2040;
  color: var(--flame);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--mute) 65%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

a:hover {
  color: var(--flame);
  text-decoration-color: var(--flame);
}

a:focus-visible {
  outline: 1px solid var(--flame);
  outline-offset: 3px;
}

main {
  position: relative;
  z-index: 1;
  max-width: 22.5rem;
  margin: 0 auto;
  padding: 20vh 1.5rem 30vh;
}

h1,
h2,
p {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

h1 {
  font-family: var(--font-name);
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #eef3fa;
  margin-bottom: 1.6rem;
}

.bio {
  color: var(--dusk);
  margin-bottom: 2.75rem;
}

.thing {
  margin-bottom: 2.75rem;
}

.thing h2 {
  font-family: var(--font-name);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--rose);
  margin-bottom: 0.55rem;
}

.thing h2 a {
  color: inherit;
  text-decoration: none;
}

.thing h2 a:hover {
  color: var(--flame);
}

.thing p {
  color: var(--dusk);
}

.thing .url {
  color: var(--mute);
}

.handle {
  color: var(--mute);
}

.handle a {
  text-decoration: none;
}

.handle a:hover {
  color: var(--flame);
}

/* night — banner, whispered */

.world {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sky,
.grain,
.vignette {
  position: absolute;
  inset: 0;
}

.sky {
  background:
    radial-gradient(ellipse 90% 55% at 72% -4%, #243864 0%, transparent 58%),
    radial-gradient(ellipse 50% 35% at 20% 0%, #18243c 0%, transparent 50%),
    linear-gradient(180deg, #141c30 0%, var(--midnight) 48%, #080b14 100%);
}

.grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  background: radial-gradient(
    ellipse at 50% 38%,
    transparent 0%,
    transparent 52%,
    rgba(6, 8, 14, 0.55) 100%
  );
}

.cloud,
.peak,
.frog,
.spark {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cloud {
  opacity: 0.45;
}

.c1 {
  top: 7%;
  right: 8%;
  width: 84px;
  height: 18px;
  background: url("sprites/cloud.svg") no-repeat;
  background-size: 84px 18px;
}

.c2 {
  top: 16%;
  left: 6%;
  width: 40px;
  height: 10px;
  background: url("sprites/cloud2.svg") no-repeat;
  background-size: 40px 10px;
  opacity: 0.35;
}

.peak {
  right: 2%;
  bottom: 6%;
  width: 80px;
  height: 24px;
  background: url("sprites/peak.svg") no-repeat;
  background-size: 80px 24px;
  opacity: 0.9;
}

.frog {
  left: 8px;
  bottom: 10px;
  width: var(--frog);
  height: var(--frog);
  background: url("sprites/frog.svg") no-repeat 0 0 / var(--frog-sheet)
    var(--frog);
  animation: frog-idle 2.8s steps(1) infinite;
}

.star {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  background: #e8eef8;
  animation: twinkle 3.8s steps(2) infinite;
}

.spark {
  width: 5px;
  height: 5px;
  background: url("sprites/spark.svg") no-repeat 0 0 / 10px 5px;
  animation: sparkle 2.4s steps(2) infinite;
}

.s1 {
  top: 9%;
  left: 22%;
}
.s2 {
  top: 6%;
  right: 28%;
  animation-delay: -0.8s;
}
.s3 {
  top: 18%;
  right: 14%;
  animation-delay: -1.6s;
}
.s4 {
  top: 12%;
  left: 8%;
  animation-delay: -2.2s;
}
.s5 {
  top: 28%;
  right: 8%;
  animation-delay: -0.4s;
}
.s6 {
  top: 8%;
  left: 48%;
  animation-delay: -3s;
}
.s7 {
  top: 22%;
  left: 70%;
  animation-delay: -1.1s;
}
.s8 {
  top: 4%;
  right: 42%;
  animation-delay: -2.7s;
}

.k1 {
  top: 11%;
  right: 20%;
}
.k2 {
  top: 5%;
  left: 30%;
  animation-delay: -1.2s;
}
.k3 {
  top: 20%;
  right: 36%;
  animation-delay: -2s;
}

@keyframes frog-idle {
  0%,
  24% {
    background-position: 0 0;
  }
  25%,
  42% {
    background-position: calc(var(--frog) * -1) 0;
  }
  43%,
  84% {
    background-position: 0 0;
  }
  85%,
  92% {
    background-position: calc(var(--frog) * -3) 0;
  }
  93%,
  100% {
    background-position: 0 0;
  }
}

@keyframes twinkle {
  0%,
  49% {
    opacity: 0.95;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes sparkle {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10px 0;
  }
}

@media (min-width: 720px) {
  :root {
    --frog: 96px;
    --frog-sheet: 384px;
  }

  body {
    font-size: 0.875rem;
  }

  main {
    margin: 0;
    margin-left: 16vw;
    max-width: 34rem;
    padding: 22vh 0 30vh;
  }

  h1 {
    font-size: 1rem;
  }

  .thing h2 {
    font-size: 0.68rem;
  }

  .frog {
    left: 28px;
    bottom: 18px;
  }

  .c1 {
    width: 112px;
    height: 24px;
    background-size: 112px 24px;
    right: 10%;
    top: 8%;
  }

  .c2 {
    width: 60px;
    height: 15px;
    background-size: 60px 15px;
    top: 14%;
    left: 8%;
  }

  .peak {
    width: 160px;
    height: 48px;
    background-size: 160px 48px;
    right: 4%;
    bottom: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frog,
  .star,
  .spark {
    animation: none;
  }
}