html,
body {
  padding: 0;
  margin: 0;
}

body {
  --pad: 40px;
  --content-pad: var(--pad);
  margin: 0;
  padding: 20px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.7;
  background-color: var(--background);
  color: var(--text);
}

@media (max-width: 640px) {
  body {
    --pad: 24px;
    --content-pad: 0;
  }
}

.post {
  max-width: 680px;
  margin: 0 auto;
}

.post header {
  padding: 32px calc(var(--pad) - 3px);
  border: 3px solid var(--text);
  box-shadow: 10px 10px 0 var(--accent);
}

.post h1 {
  margin: 20px 0 4px;
  font-size: 24px;
}

.post time {
  color: var(--text-dimmest);
}

.content {
  padding: 16px var(--content-pad) 32px;
}

.posts {
  list-style: none;
  padding: 0;
}

.posts li {
  display: flex;
  gap: 2ch;
}

.content img {
  max-width: 100%;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:
    background-size 0.3s,
    color 0.3s;
}

a:hover {
  color: var(--background);
  background-size: 100% 100%;
}

.content a[href^="http"]:not([href*="//adi.is"])::after {
  content: "↗";
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  transition: color 0.3s;
}

.content a[href^="http"]:not([href*="//adi.is"]):hover::after {
  color: inherit;
}

.home {
  color: var(--accent);
  font-size: 22px;
  text-decoration: none;
}

.footnote-ref a {
  color: var(--accent);
  text-decoration: none;
}

hr.footnotes-sep {
  border: none;
  border-top: 3px solid var(--text);
  margin: 32px calc(-1 * var(--content-pad)) 0;
}

.footnotes {
  padding-top: 16px;
  font-size: 13px;
  color: var(--text-dimmer);
}

.footnotes-list {
  padding-left: 2ch;
}

.footnote-backref {
  text-decoration: none;
}