@font-face {
  font-display: swap;
  font-family: CascadiaMono;
  font-style: normal;
  font-weight: 200 700;
  src: url(/font/latin/CascadiaMono.woff2) format(woff2);
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  src: url(/font/latin/Inter.woff2) format(woff2);
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  src: url(/font/latin/Inter-Italic.woff2) format(woff2);
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: CascadiaMono;
  font-style: italic;
  font-weight: 200 700;
  src: url(/font/latin/CascadiaMono-Italic.woff2) format(woff2);
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

html {
  --font-family-mono: CascadiaMono, monospace;
  --padding: 1em;
}

body {
  background:
    url(/img/dr9n.svg) center no-repeat,
    linear-gradient(to top, black, 70%, transparent),
    radial-gradient(at top, transparent, 50%, deepskyblue, springgreen) black;
  font-family: Inter, sans-serif;
  margin: 0;
  min-block-size: calc(100vb - var(--padding) * 2);
  padding: var(--padding);
  position: relative;
}

/*
01100100
01110010
00111001
01101110
 */

body:before {
  background: url(/img/dr9n.svg) center no-repeat;
  content: '';
  filter: blur(2vb);
  inset: 0;
  position: absolute;
  z-index: -1;
}

header {
  color: black;
  font-family: var(--font-family-mono);
}

h1 {
  font-weight: normal;
}

abbr {
  text-decoration: none;
}

img {
  max-inline-size: 2em;
  vertical-align: middle;
}

main {
  color: seashell;
  justify-self: center;
  margin-block-start: 16em;
}

em,
dfn {
  font-style: normal;
}

div p {
  background-clip: text;
  background-image: linear-gradient(to right, lightgray, 25%, seashell);
  color: transparent;
  font-size: 6em;
  font-weight: bold;
  margin-block: 0;
  max-inline-size: fit-content;
  letter-spacing: 0.025em;
}

p:has(em) {
  background-image: linear-gradient(
    to bottom right,
    deepskyblue,
    80%,
    springgreen
  );
}

main > p {
  color: lightgray;
  font-family: var(--font-family-mono);
  max-inline-size: 40vi;
}