:root {
  --border-solid: 2px solid currentColor;

  --shadow-color: #0007;
  --shadow-overlay: 0.5rem 0.5rem var(--shadow-color);
  --shadow-hover: 0.2rem 0.2rem var(--shadow-color);
  --shadow-inset: inset 0.1rem 0.1rem var(--shadow-color);
  --shadow-inset-heavy: inset 0.15rem 0.15rem var(--shadow-color);
}

body {
  padding: 1rem;
  margin: auto;
  max-width: 80ch;

  color: var(--col-cn-fg);
  background-color: var(--col-pg-bg);
  background-size: 1rem 1rem;
  background-image: radial-gradient(circle,
      light-dark(#0003, #fff3) 1px,
      transparent 1px);
  background-position: center;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0.5em;

  --header-min: 1em;
  --header-max: 1.4em;
  font-size: clamp(var(--header-min),
      2vw + var(--header-min),
      var(--header-max));
}

h1 {
  --header-min: 2em;
  --header-max: 3em;
}

h2 {
  --header-min: 1.6em;
  --header-max: 2.4em;
}

h3 {
  --header-min: 1.2em;
  --header-max: 1.6em;
}

article>p {
  margin-block: 1rem;
}

a {
  color: var(--col-hl-fg);
  text-decoration: none;

  &.secret:not(:hover) {
    color: inherit;
  }

  &:hover {
    color: var(--col-cn-bg);
    background: var(--col-hl-fg);
    text-decoration: underline;
  }
}

pre:has(code) {
  overflow: scroll;
}