:root {
  --bg: #fbf8f2;
  --text: #2b2a27;
  --muted: #6f6a60;
  --link: #8a3b12;
  --rule: #e2dccf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1c1a;
    --text: #e8e4dc;
    --muted: #a39d91;
    --link: #e39a6c;
    --rule: #3a3833;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2rem 1rem 3rem;
  background: var(--bg);
  color: var(--text);
  font: 1.125rem/1.6 Georgia, "Times New Roman", serif;
}
a { color: var(--link); }
header { border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.site { font-size: 2rem; margin: 0; font-weight: bold; }
.site a { color: var(--text); text-decoration: none; }
.tagline { margin: 0.25rem 0 0.75rem; color: var(--muted); font-style: italic; }
nav { margin-bottom: 1rem; font-size: 1rem; }
h1, h2 { line-height: 1.25; margin-bottom: 0.25rem; }
h2 a { color: var(--text); text-decoration: none; }
.meta { color: var(--muted); font-size: 0.95rem; margin-top: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
img { max-width: 100%; height: auto; }
.alignleft { float: left; margin: 0.3rem 1.25rem 0.75rem 0; }
.alignright { float: right; margin: 0.3rem 0 0.75rem 1.25rem; }
.aligncenter { display: block; margin: 1rem auto; }
article::after { content: ""; display: table; clear: both; }
.embed-youtube iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; }
footer { border-top: 1px solid var(--rule); margin-top: 3rem; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 30rem) {
  .alignleft, .alignright { float: none; display: block; margin: 1rem auto; }
}