html { background: #000814; color: #d8d8d8; }
body { margin: 8px; }
main { width: 100%; margin: 0; box-sizing: border-box; }
body, p, li { font-family: serif; line-height: 1.6; }
pre, h1, h2, nav, small { font-family: monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
a:link { color: #33ffff; }
a:visited { color: #9966ff; }
img { max-width: 100%; height: auto; image-rendering: pixelated; }
.photos { width: 100%; border-spacing: 2px; }
.photos td { padding: 6px; vertical-align: top; }
.photos td:first-child { width: 160px; }
.photo-kind { font-family: monospace; color: #ffff66; }
@media (max-width: 600px) {
  body { margin: 6px; }
  h1 { font-size: 1.1em; }
  header p { overflow-wrap: anywhere; }
  .photos, .photos tbody, .photos tr, .photos td { display: block; }
  .photos td, .photos td:first-child { width: auto; padding: 4px 0; }
}