:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: #f7f7f9;
  color: #202126;
}

* { box-sizing: border-box; }

body { margin: 0; }

header, main, footer {
  width: min(100% - 2rem, 48rem);
  margin-inline: auto;
}

header { padding-top: 2rem; }

main { padding-block: 2rem 3rem; }

footer {
  border-top: 1px solid #dcdde2;
  padding-block: 1.5rem 2rem;
  color: #52545b;
  font-size: 0.9rem;
}

nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

a { color: #1646a2; }

a:focus-visible { outline: 3px solid #1646a2; outline-offset: 3px; }

h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }

h2 { margin-top: 2rem; font-size: 1.3rem; }

p, li { max-width: 70ch; }

.intro { font-size: 1.1rem; }

.muted { color: #52545b; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; background: #17181c; color: #f1f1f4; }
  footer { border-color: #45464d; color: #b6b7be; }
  a { color: #a8c4ff; }
  a:focus-visible { outline-color: #a8c4ff; }
  .muted { color: #b6b7be; }
}