/* One sheet for the whole site. Every page used to carry its own <style>
   block, so a colour changed in one place and not in the other three. */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  line-height: 1.6;
  color: #222;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.2em; margin-top: 1.8em; }
h3 { font-size: 1.05em; margin-top: 1.4em; }

code { background: #f2f2f2; padding: 1px 5px; border-radius: 4px; }

/* The card a game gets on the index, and the contact block on a support
   page: the same panel, because they are the same kind of thing — a box you
   are meant to act on. */
.card, .contact {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 1.2em 0;
}

.card h2 { margin: 0 0 6px; font-size: 1.25em; }
.card p { margin: 0.4em 0; }

/* Every page says where it belongs and how to get back up. */
.crumbs { font-size: 0.9em; opacity: 0.7; margin-bottom: 1.6em; }

.links a { margin-right: 16px; }

footer {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid #ddd;
  font-size: 0.9em;
  opacity: 0.75;
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #ddd; }
  code { background: #222; }
  .card, .contact { background: #1d1d1d; }
  footer { border-top-color: #333; }
  a { color: #7ab8ff; }
}