:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 4rem 1.5rem;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  background: #fdfdfc;
}

main { max-width: 34rem; margin: 0 auto; }

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1rem; margin: 2rem 0 .5rem; }

.tagline { color: #555; margin: 0 0 2.5rem; }

a { color: #14507a; }

ul { padding-left: 1.1rem; }

footer { margin-top: 3rem; color: #777; font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  body { color: #e6e6e6; background: #16161a; }
  .tagline { color: #a0a0a0; }
  a { color: #7fb2d9; }
  footer { color: #8a8a8a; }
}