body > #grid > nav {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap: 200px;
  --element-gap-links: 200px;
  --element-gap-bar: 200px;
  --element-gap-form: 200px;
  --element-font: normal 40px "Comic Sans MS";
  --element-font-icon: bold italic 40px "Comic Sans MS";
  --element-color-form-labels: red;
  --element-color-form-active: red;
  --element-padding-inline-bar-links: 200px;
  --element-padding-inline-search-input: 200px;
  --element-background-bar-items: red;
  --element-border-color-bar-items: red;

  /** Optional arguments with sensible defaults */
  --element-border-radius-bar: none;
  --element-box-shadow-bar-items: none;

  display: grid;
  gap: var(--element-gap);
  grid-template-columns:
    [full-start nav-start]
      1fr
    [nav-end user-start]
      max-content
    [full-end user-end]
;
  grid-template-rows: min-content;
  height: auto;

  > user-fetch {
    display: none;
  }

  > *:not(dl) {
    grid-column: full;
  }

  > dl,
  > ul {
    font: var(--element-font);
    display: flex;
    gap: var(--element-gap-links);
    flex-wrap: wrap;
  }

  > dl {
    > dt {
      font-weight: bold;
    }
  }

  > ul {
    &:nth-of-type(1) {
      grid-column: nav;
    }

    &:nth-of-type(2) {
      grid-column: user;
      justify-self: end;

      > :first-child {
        font-weight: bold;
      }
    }
  }

  > div {
    display: flex;
    gap: var(--element-gap-bar);

    > * {
      background: var(--element-background-bar-items);
      box-shadow: var(--element-box-shadow-bar-items);
      border-radius: var(--element-border-radius-bar);
      border: 1px solid var(--element-border-color-bar-items);
    }

    > form {
      flex-grow: 1;
      display: flex;
      flex-wrap: nowrap;
      gap: var(--element-gap-form);

      > * {
        grid-column: main;
      }

      > input[type=search],
      > input[type=submit] {
        line-height: 1;
        height: 100%;
        align-self: stretch;
        border: none;
        border-radius: var(--element-border-radius-bar);
      }

      > input[type=search] {
        font-size: larger;
        padding: var(--element-padding-inline-search-input);
        flex-grow: 1;
        font-style: inherit;
        font-family: inherit;
        -webkit-appearance: textfield;

        &::placeholder {
          color: var(--element-color-form-labels);
        }
      }

      > input[type=submit] {
        grid-column: submit;
        grid-row: 1;
        width: auto;
        color: var(--element-color-form-labels);
        font: var(--element-font-icon);
        background: transparent;

        &:hover {
          color: var(--element-color-form-active);
        }
      }
    }

    > ul {
      white-space: nowrap;
      display: flex;
      gap: var(--element-gap-bar);
      justify-content: end;

      &, > li, > li > a {
        height: 100%;
      }

      > li, > li > a {
        border-radius: var(--element-border-radius-bar);
      }

      > li {
        align-content: baseline;
        display: table;

        > a, > a:visited {
          display: table-cell;
          font: var(--element-font);
          padding: 0 var(--element-padding-inline-bar-links);
          vertical-align: middle;
        }
      }
    }
  }
}