:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, monospace;
  background: #000;
  color: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #000; }
body { margin: 0; min-height: 100vh; background: #000; color: #fff; }
a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #4a7dff; }

main { min-height: 100vh; padding: 24px; }
header { margin: 0 auto; max-width: 900px; }
.wordmark { color: #fff; text-decoration: none; }
.wordmark:visited { color: #fff; }
header p { margin: 0; font-size: 14px; }
article { max-width: 900px; margin: 22vh auto 0; }
h1 { margin: 0 0 24px; font-size: clamp(28px, 6vw, 48px); font-weight: 400; }
article p { max-width: 680px; margin: 0; font-size: clamp(16px, 2.5vw, 20px); line-height: 1.7; }
footer { max-width: 900px; margin: 24vh auto 0; color: #fff; font-size: 14px; }

@media (max-width: 600px) {
  main { padding: 18px; }
  article { margin-top: 18vh; }
  footer { margin-top: 20vh; }
}