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(--theme-size-active-outline) var(--theme-color-active) solid;
      outline-offset: var(--theme-size-active-outline);
    }

    & 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(--theme-padding-input);
      font: inherit;
    }

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

    & select {
      accent-color: var(--theme-color-input);
    }

    & 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(--theme-gap-menu);
      flex-wrap: wrap;
      align-items: baseline;

      > li {
        list-style: none;
      }
    }

    > main {
      > h2 {
        font-size: x-large;
      }
    }
  }
}