body {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font: 17px/1.55 Georgia, "Times New Roman", serif;
  color: #111;
  background: #fff;
}
nav { margin-bottom: 3rem; }
nav a { margin-right: 1rem; }
h1 { font-size: 1.4em; font-weight: normal; margin: 0 0 0.25rem; }
h2 { font-size: 1em; font-weight: normal; margin: 2rem 0 0.5rem; }
h3 { font-size: 1em; font-style: italic; font-weight: normal; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 0.75rem; }
a { color: inherit; text-underline-offset: 3px; }
code { font: 0.85em/1.4 ui-monospace, Menlo, monospace; }
pre { overflow-x: auto; padding: 0.75rem 1rem; background: #f4f4f4; margin: 0 0 1rem; }
.date { color: #777; }
.project { margin: 1.25rem 0; }
.project p { margin: 0 0 0.25rem; }
.posts { list-style: none; padding: 0; }
.posts li { margin: 0 0 0.5rem; }
.posts .date { display: inline-block; min-width: 7rem; }
article h2 { font-weight: bold; }
footer { margin-top: 2.5rem; }
@media (prefers-color-scheme: dark) {
  body { color: #eee; background: #111; }
  pre { background: #1d1d1d; }
  .date { color: #999; }
}
img { max-width: 100%; height: auto; display: block; margin: 0 0 1.5rem; }
ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }
li { margin: 0 0 0.4rem; }
.note { color: #777; font-style: italic; }
@media (prefers-color-scheme: dark) {
  .note { color: #999; }
}