/* The app on a page: white paper, one ink, Times throughout, everything
   down the middle. Dark where the reader's machine is dark. */
:root {
  color-scheme: light dark;
  --paper: #fff;
  --ink: #1a1a1a;
  --faint: rgba(26, 26, 26, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #000; --ink: #f0f0f0; --faint: rgba(240, 240, 240, 0.5); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 96px;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.55 "Times New Roman", Times, serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

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

h1 { font-size: 18px; font-weight: normal; margin: 56px 0 0; }
h2 { font-size: 18px; font-weight: normal; margin: 56px 0 22px; }
p { margin: 0 0 18px; }
a { color: inherit; }
.faint { color: var(--faint); }

/* The beach, as wide as the page and no taller than a third of the screen. */
.beach { display: block; width: 100%; height: 280px; margin: 0 auto; }
@media (max-width: 600px) { .beach { height: 220px; } }

nav { margin-top: 12px; }
nav a { margin: 0 10px; }

.download {
  display: inline-block;
  margin: 8px 0 0;
  padding: 10px 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
}

.text { text-align: left; }
.text p, .text li { margin-bottom: 16px; }
ul { padding-left: 1.2em; }
footer { margin-top: 72px; }

/* This year's own color, as a small light in the sentence. */
.orb {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.3em;
  vertical-align: -0.08em;
  border-radius: 50%;
  animation: glow 12.5s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }