@font-face {
  font-family: "FT88";
  src: url("fonts/FT88-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FT88";
  src: url("fonts/FT88-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ascii-color: #9cc8ec;
  --ascii-opacity: 0.6;
  --ascii-font: "FT88", ui-monospace, monospace;
  --title-color: #ff0000;
  --title-blend: multiply;
}

body {
  margin: 0;
  font: 1rem/1.5 "FT88", ui-monospace, monospace;
  color: #111;
  background: #fff;
}

main {
  position: relative;
  max-width: 40rem;
  margin: 4rem auto;
  padding: 0 1rem;
}

h2 {
  font-weight: 400;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  /* Blend with the ASCII background so its glyphs show through the letters. */
  color: var(--title-color);
  mix-blend-mode: var(--title-blend);
}

/* ASCII art background. The generator sets --ascii-cols, --ascii-rows and
   --ascii-advance (glyph width in em) inline; the font size is picked so the
   grid covers the viewport, like background-size: cover. */
.ascii-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.ascii-bg pre {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--ascii-font);
  font-size: max(
    100vw / (var(--ascii-cols) * var(--ascii-advance)),
    100vh / var(--ascii-rows)
  );
  line-height: 1;
  color: var(--ascii-color);
  opacity: var(--ascii-opacity);
}

@media (prefers-color-scheme: dark) {
  :root { --ascii-opacity: 0.35; --title-color: #b7cdf0; --title-blend: screen; }
  body { color: #eee; background: #111; }
  a { color: #8ab4f8; }
}