:root {
  --bg: #000;
  --fg: #e8e6e1;
  --muted: #9a9893;
  --line: #2e2d2a;
  --link: #8ab4ec;
  --code: #1c1b19;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 46rem;
  padding: 2rem 1rem 3rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--link); }
h1 { font-size: 2rem; margin: 0 0 .3rem; letter-spacing: .02em; }
h2 { font-size: 1.35rem; margin: 2.8rem 0 .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
p, ol, ul { margin: .5rem 0; }
code { background: var(--code); padding: 0 .25em; border-radius: 3px; font-size: .9em; }
img { max-width: 100%; height: auto; display: block; }

header p { margin: 0 0 1rem; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.cat img { width: 100%; max-width: 220px; margin: 0 auto; }
.cat h3 { margin-top: .8rem; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: .3rem 0; font-size: .92rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }


table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: .5rem 0; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }

figure { margin: 1rem 0; }
#meme img { width: 100%; margin: 0 auto; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

@media (max-width: 34rem) {
  table { display: block; overflow-x: auto; }
}