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

  > body > #grid {
    & a {
      color: var(--theme-color-link);

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

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

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

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

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

    & button,
    & select,
    & textarea,
    & input[type=button],
    & input[type=submit],
    & input[type=datetime-local],
    & input[type=checkbox],
    & input[type=file]::file-selector-button,
    & input[type=search],
    & input[type=text] {
      border-radius: var(--theme-border-radius);
      background: var(--theme-background-input);
      color: var(--theme-color-input);
      border: 1px solid var(--theme-color-shadow);
      max-width: 100%;
      padding: var(--size-tiny);
      font: inherit;
    }

    & input[type=file]::file-selector-button {
      font: inherit;
    }
    & input[type=radio],
    & input[type=checkbox] {
      accent-color: var(--theme-color-accent);
    }

    & input[type=radio] {
      border-radius: 50%;
      display: block;
    }

    & input[type=search] {
      appearance: textfield;

      &::-webkit-search-decoration,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        display: none;
      }
    }

    & textarea {
      min-height: 15ex;
      field-sizing: content;
      word-wrap: break-word;
      word-break: break-word;
    }

    > menu {
      display: flex;
      gap: var(--common-gap);
      flex-wrap: wrap;
      align-items: baseline;

      > li {
        list-style: none;
      }
    }

    > main {
      > h2 {
        font: var(--theme-font-lead);
        font-size: x-large;
      }

      > h1,
      > h2,
      > h3 {
        > strong {
          background: var(--theme-background-lead-accent);
          background-clip: text;
          color: transparent;
          font: var(--theme-font-heading-accent);
        }
      }

      > h1 {
        font-size: 300%;

        &:first-child {
          margin-top: var(--size-medium);
        }
      }

      > h2 {
        &:not(:empty)[data-icon]:not([data-icon=''])::before {
          display: block;
          text-align: center;
          padding-block: var(--grid-gap-block);
        }
      }

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

        > a {
          color: inherit;
        }
      }

      > h1 + h3,
      > h2 + h3 {
        margin-top: calc(var(--grid-gap-block) * -1);
      }
    }
  }
}