body {
  margin: 1.5em auto;
  max-width: 38em;
  padding: 0 1em 4em;
  background: #f3efe4;
  color: #1a1a1a;
  font: 16px/1.45 Georgia, "Times New Roman", serif;
}

#topnav {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 6px;
}

#topnav a {
  margin-left: 0.8em;
}

h1 {
  font-size: 2.4em;
  font-weight: normal;
  margin: 0.6em 0 0.25em;
}

h2 {
  font-size: 1.25em;
  margin: 2.2em 0 0.4em;
  border-bottom: 1px dotted #888;
  padding-bottom: 2px;
}

a { color: #1034a6; }
a:visited { color: #551a8b; }
a:hover { color: #b00; }

fieldset {
  border: 2px solid #1a1a1a;
  padding: 6px 6px 0;
  margin: 1em 0 0.5em;
  background: #2a2a28;
}

legend {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  background: #f3efe4;
  padding: 0 5px;
}

canvas {
  display: block;
  width: 100%;
  background: #000;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#hud {
  color: #ccc;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  margin: 4px 2px 6px;
}

#list {
  padding-left: 1.2em;
  margin-top: 1.4em;
}

#list li {
  margin: 0.7em 0;
}

#list li.got {
  background: #e4eedc;
}

#foot {
  margin-top: 3em;
  font-size: 13px;
  color: #666;
}

@media (max-width: 500px) {
  body { font-size: 15px; }
  #help { display: none; }
}

@media print {
  fieldset, #topnav { display: none; }
  body { background: #fff; max-width: none; }
}