* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fafaf7;
  color: #1c1c1c;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 3px; }
main, header { max-width: 520px; margin: 0 auto; padding: 0 24px; }
header { padding-top: 32px; font-size: 15px; }
h1 { margin: 0 0 8px; font-size: 28px; font-weight: 600; }
.top { padding-top: 96px; }
.intro { margin: 0 0 40px; color: #666; }
.games { display: flex; flex-direction: column; }
.game {
  display: block;
  padding: 16px 0;
  border-top: 1px solid #ddd;
  text-decoration: none;
}
.game:last-child { border-bottom: 1px solid #ddd; }
.game h2 { margin: 0; font-size: 20px; font-weight: 500; }
.game h2::after { content: " \2192"; opacity: 0; transition: opacity .1s; }
.game:hover h2::after, .game:focus-visible h2::after { opacity: 1; }
.game p { margin: 0; color: #666; font-size: 15px; }
aside { margin-top: 32px; color: #666; font-size: 14px; }
aside p { margin: 0; }
#compatibility:not(:empty) { margin-top: 12px; color: #a33; }
footer { margin-top: 48px; padding-bottom: 40px; font-size: 14px; color: #888; }
@media (prefers-color-scheme: dark) {
  body { background: #161616; color: #e6e6e6; }
  .game, .game:last-child { border-color: #333; }
  .intro, .game p, aside { color: #999; }
  footer { color: #777; }
  a:focus-visible { outline-color: #e6e6e6; }
}
@media (max-width: 480px) { .top { padding-top: 48px; } }