:root {
    --bg1: #f0f0f0;
    --bg2: #fff;
    --fg: #222;
    --ac: #ccc;
    --margin: 1rem;
    --white: var(--bg2);
}
@media(prefers-color-scheme: dark) {
    :root {
        --bg1: #292929;
        --bg2: #191919;
        --fg: #eee;
        --ac: #444;
        --white: var(--fg);
    }
}
body {
    background: var(--bg1);
    color: var(--fg);
    font: clamp(10.5pt, 2.5vw, 11.25pt)/1.5 Verdana, sans-serif;
    margin: 0
}
nav {
    padding: 0.5rem 1rem;
    background: #285577;
    color: var(--white);
    font-weight: bold;
}
main {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: 38rem;
    margin: 3rem auto;
}
main > * {
    background: var(--bg2);
    border: thin solid #4c7899;
    padding: 0 var(--margin);
    grid-column: span 8;
}
article {
    padding-bottom: 0.5rem
}
@media screen and (max-width: 37rem) {
    main {
        display: unset
    }
    main > * {
        margin: 1rem
    }
}
header {
    background: #285577;
    border-bottom: thin solid #4c7899;
    padding: 0.5rem 1rem;
    margin: 0 calc(-1 * var(--margin)) 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--white);
    font-weight: bold;
}
h1, h2, h3 {
    font-size: 1.1em;
    margin: 1.35rem 0 -0.35rem;
}
header h1, header h2 {
    margin: 0;
    flex: 1
}
h3 {
    font-size: 1em;
    margin: 1rem 0 -1rem;
}
time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 95%;
    font-weight: normal
}
code {
    font-family: Monaco, monospace;
    font-size: 95%;
}
pre code {
    display: block;
    background: var(--bg1);
    padding: 0.75rem;
    overflow-x: auto
}
img {
  display: block;
  max-width: 100%;
  height: auto
}
blockquote {
  margin: 0 1.525rem;
  padding-left: 1rem;
  border-left: thin solid;
}
ol, ul {
    padding-left: 1.525rem;
}
sup {
    line-height: 0
}
figure {
  margin: 1rem 0
}
figcaption {
  opacity: 0.7;
  padding-top: 0.5rem
}
p,pre,blockquote {
  margin-top: 1.15rem;
  margin-bottom: 1.15rem;
}
figure pre {
  margin: 0
}
a {
    color: inherit;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.06em;
}
header a, .posts a, nav a {
    text-decoration: none;
}
header a:hover, .posts a:hover, nav a:hover {
    text-decoration: underline;
}
.posts {
    padding: 0;
    margin: 0
}
.posts li {
    display: flex;
    justify-content: space-between;
    border-bottom: thin solid var(--ac);
    margin: 0 calc(-1 * var(--margin));
    padding: 0 var(--margin);
    align-items: baseline;
}
.posts a {
    padding: 0.5rem 0;
    flex: 1
}
.posts li:last-of-type {
  border-bottom: 0;
}
.posts li:hover {
    background: var(--bg1);
}
.footnotes {
    font-size: smaller
}