html {
  font: var(--font-default);
  color: var(--color-primary);
  background: var(--background-page);
  min-height: 100%;
}

body > #grid {
  & input[type=radio],
  & input[type=checkbox] {
    accent-color: var(--color-active);
  }

  & a {
    color: var(--color-link);
  }

  & a:active,
  & input[type=submit]:active,
  & input[type=button]:active,
  & button:active,
  & *:focus {
    outline: var(--size-tiny) var(--color-active) solid;
    outline-offset: var(--size-tiny);
  }

  > header > h1 {
    font: var(--font-heading);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: .25ex;
    text-decoration-thickness: .25ex;
  }

  > header > h1 {
    font-size: max(var(--size-large), 4vw);
  }

  > main {
    > h2 {
      font-size: xx-large;

      &:not(:first-child):not(h3 + &):before {
        display: block;
        content: '❉ ❉ ❉';
        grid-column: compact;
        text-align: center;
        font-size: x-large;
        padding-top: calc(var(--size-double) - var(--grid-gap));
        padding-bottom: var(--size-double);
        color: var(--color-icon);
      }
    }

    &,
    & > header {
      > h2 {
        > strong {
          background: var(--background-lead-accent);
          background-clip: text;
          color: transparent;
          font: var(--font-lead-accent);
        }
      }
    }

    > h3 {
      font-size: x-large;
      color: var(--color-lead);

      > a {
        color: inherit;
      }
    }
  }

  & details > summary {
    color: var(--color-link);
  }

  & a:visited {
    color: var(--color-visited);
  }

  & a:hover,
  & *:not(main) a:visited:hover,
  & details > summary:hover {
    &, &:before {
      color: var(--color-active);
    }
  }

  > *:not(main) a:visited {
    color: var(--color-link);
  }
}