@font-face {
  /* A cozy VT320 (text terminal) font by Peter Hull */
  font-family: vt323;

  /* https://fonts.google.com/specimen/VT323 */
  src:
      url(data:font/woff2;base64,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)
      format('woff2');
}

* {
  /* Everything must be nerdy */
  font-family: vt323 !important;

  /* Always use our font's own letterforms */
  font-weight: normal !important;
  font-style: normal !important;

  /* 0.4 is each character's width-to-height ratio */
  font-size: clamp(
      15px,
      calc(100svw / (53 * 0.4)),
      19px) !important;

  /* We'll manually define margins... */
  margin: 0;

  /* But padding is permanently zero */
  padding: 0;
}

/* These elements have custom click handlers... */
[tabindex='0'] {
  /* ... so here, we plead for click priority */
  touch-action: pan-x pan-y;
}

:focus-visible {
  outline: none;
}

:focus-visible character {
  background: color-mix(in oklch, currentColor, transparent 50%)
}

:root {
  --white: #dadada;
  --gray: #999;

  --blue: #00d1ff;
  --pink: #f4a;
  --yellow: #ee0;
  --red: #f35;
  --orange: #fb1;
  --green: #8d8;

  --blue-faded: #113;
  --pink-faded: #212;
  --yellow-faded: #221;
  --green-faded: #131;

  --egyptian-dark-blue: #1948ad;

  line-height: 1;
  background: black;
}

body {
  color: var(--white);
  --animation-speed: 1;
}

word, character {
  display: inline-block;
}

word {
  white-space: nowrap;
}

character {
  animation-name: ripple;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  animation-duration: calc(
    var(--base-animation-duration, 2s) / var(--animation-speed));
}

/* De-sync!  */
character:nth-child(2n) { --base-animation-duration: 1.5s }
character:nth-child(3n) { --base-animation-duration: 0.8s }
character:nth-child(5n) { --base-animation-duration: 0.5s }

@keyframes ripple {
  25% { transform: translateY(0.5px) }
  50% { transform: translateY(0px) }
  75% { transform: translateY(-0.5px) }
}

.wiggles.like-fire character {
  animation-name: fire;
}

fieldset {
  border: 0;
  width: fit-content;
  line-height: 1.3;
}

input               { accent-color: var(--accent-color) }
input:focus-visible { outline: var(--accent-color) solid 2px }

label               { display: block }
label:has(:checked) { color: var(--white) }


/* Treat 'em like regular text */
button {
  all: unset;
  display: inline-block;
}

blockquote {
  color: var(--yellow);
}

/* Tone */

strong    { color: var(--yellow) }
em        { color: var(--pink) }
s, small  { color: var(--gray) }

mark {
  background: inherit;
  color: var(--blue);
}

s {
  text-decoration: none;
}

/* Links */

/* We underline each character individually, not collectively */
a { text-decoration: none }

/* (Some pages underline these, too.) */
[role=link] { cursor: pointer }

/* Secret links aren't underlined */
a:not(.secret) character {
  text-decoration: underline;
}

/* Let links blend in a bit */
a { color: inherit }

/*
  Letters with descenders (e.g. j, y) can look janky
  if they're the final letter in an underlined word.
*/
.no-tail-decor character:last-child {
  text-decoration: none;
}

/* Wiggling */

.wiggles character {
  animation-name: wiggle;
}

@keyframes wiggle {
  25% { transform: translateY( 2px) }
  50% { transform: translateY( 0px) }
  75% { transform: translateY(-2px) }
}

.wiggles.different character {
  animation-name: wiggle-wildly;
  --animation-speed: 1.5;
}

@keyframes wiggle-wildly {
  25% { transform: translateY( 3px) }
  50% { transform: translateY( 0px) }
  75% { transform: translateY(-3px) }
}


.wiggles.different.like-fire character {
  animation-name: fire;
  --animation-speed: 2;
}

@keyframes fire {
  0%  { transform: translateY( 0px); color: var(--red) }
  25% { transform: translateY( 2px); color: var(--orange) }
  50% { transform: translateY( 0px); color: var(--yellow) }
  75% { transform: translateY(-2px); color: var(--orange) }
}

.wiggles.like-water character {
  animation-name: float;
  --animation-speed: 0.5;
}

@keyframes float {
  25% { transform: translateY( 1px) }
  50% { transform: translateY( 0px) }
  75% { transform: translateY(-1px) }
}

.wiggles.different.like-water character {
  animation-name: vanish;
}

@keyframes vanish {
  25% { transform: translateY( 1px); opacity: 0% }
  50% { transform: translateY( 0px); opacity: 0% }
  75% { transform: translateY(-1px); opacity: 100% }
}

/* Treasure drawer */

.baby character:nth-child(3n-2) { color: var(--blue) }
.baby character:nth-child(3n-1) { color: var(--pink) }
.baby character:nth-child(3n-0) { color: var(--yellow) }

@keyframes living {
  25% { transform: translateY( 1px) }
  50% { transform: translateY( 0px) }
  75% { transform: translateY(-1px); color: var(--green); }
}

@keyframes water {
  25% { transform: translateY( 1px); color: var(--blue); }
  50% { transform: translateY( 0px); color: var(--blue); }
  75% { transform: translateY(-1px); color: inherit;}
}

@keyframes living-rainbow {
  0%    { transform: translateY( 0px); }
  12.5% { transform: translateY( 0px); color: var(--red) }
  25%   { transform: translateY( 3px); color: var(--orange) }
  37.5% { transform: translateY( 3px); color: var(--yellow) }
  50%   { transform: translateY( 0px); color: var(--green) }
  62.5% { transform: translateY( 0px); color: var(--blue) }
  75%   { transform: translateY(-3px); color: var(--pink) }
  87.5% { transform: translateY(-3px); }
}

@keyframes lake-of-fire {
  0%  { transform: translateY( 0px); color: var(--red) }
  25% { transform: translateY( 2px); color: var(--orange) }
  50% { transform: translateY( 0px); color: var(--yellow) }
  75% { transform: translateY(-2px); color: var(--blue) }
}

/* (Like knees knocking, words shake in pairs) */

shakes word                 { animation: shake 5s step-end infinite }
shakes word:nth-child(odd)  { --direction: -1 }
shakes word:nth-child(even) { --direction:  1 }

@keyframes shake {
  87% { transform: translateX(calc(2px * var(--direction))) }
  88% { transform: translateX(0px) }
  89% { transform: translateX(calc(2px * var(--direction))) }
  90% { transform: translateX(0px) }
  91% { transform: translateX(calc(2px * var(--direction))) }
  94% { transform: translateX(0px) }
  95% { transform: translateX(calc(2px * var(--direction))) }
  96% { transform: translateX(0px) }
  97% { transform: translateX(calc(2px * var(--direction))) }
  98% { transform: translateX(0px) }
  99% { transform: translateX(calc(2px * var(--direction))) }
}

shakes.different word {
  animation-name: vibrate;
  animation-duration: .1s;
}

@keyframes vibrate {
  0%  { transform: translateX(calc(2px * var(--direction))) }
  50%  { transform: translateX(0px) }
}

/* (Secrets and their sparklers) */

.secret {
  cursor: text;

  --pre-sparkle-color: var(--yellow);
  --sparkle-color: white;

  --sparkle-start-delay: 0s;
}

/* De-sync! */
.secret:nth-child(2n) { --sparkle-start-delay: 2s }
.secret:nth-child(3n) { --sparkle-start-delay: 1.5s }
.secret:nth-child(4n) { --sparkle-start-delay: 1.1s }
.secret:nth-child(5n) { --sparkle-start-delay: 0.8s }
.secret:nth-child(6n) { --sparkle-start-delay: 0.6s }
.secret:nth-child(7n) { --sparkle-start-delay: 0.3s }

secret-sparkler {
  animation-name:            sparkle;
  animation-duration:        5s;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  animation-delay:           calc(var(--sparkle-start-delay) + var(--character-sparkle-delay))
}

@keyframes sparkle {
  98% { color: var(--pre-sparkle-color) }
  99% { color: var(--sparkle-color) }
}