body {
  overflow-x: hidden;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  /* https://modern-fluid-typography.vercel.app */
  font-size: clamp(1rem, 0.5vw + 1rem, 1.6rem);
  transition: 0.3s;
  background: var(--bodyBg);
  color: var(--textColor);
}
* {
  /* when scrolling elements into view, add margin above so they don't end up hidden by header */
  scroll-margin-top: 80px;
}
/* hydration target */
body > div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  hyphens: auto;
  flex: 1;
}
main img {
  width: 100%;
}
a {
  color: var(--linkColor);
  text-decoration: none;
}
a:hover {
  color: var(--lightGreen);
}
button {
  color: inherit;
  background: transparent;
  font-size: 1em;
  border: none;
  cursor: pointer;
}
blockquote {
  border-left: 3pt solid var(--linkColor);
  padding-left: 1em;
  margin: 1ex;
  background: var(--lightBg);
}
.grid {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
  text-align: center;
}
/* increase column width to use available space if not all columns filled */
.grid.fit {
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}
/* captions */
p > :is(a + em, picture + em) {
  text-align: center;
  display: block;
}

/* heading links inserted by custom heading renderer in src/marked.ts */
:where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
  transition: 0.3s;
  margin-left: 4pt;
  opacity: 0;
}
:where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
  opacity: 1;
}