::selection {
  color: white;
  background: royalblue;
}

body {
  color: #222;
  margin: 0;
  padding: 0;

  & > header:first-child,
  & > main:first-of-type,
  & > footer:last-child {
    max-width: 800px;
    padding: 1rem;
    margin: 0 auto;

    & a {
      color: #222;
      text-decoration: none;
    }
  }

  & > header:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 3px solid #222;
    margin-bottom: 1em;

    & > h1 {
      color: #aaa;
    }

    & > h1,
    & > nav {
      font-size: 1.5rem;
      font-weight: 600;
    }

    & > nav {
      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: 1.25rem;

      & > a {
        margin-left: 1em;
      }
    }
  }

  & > main:first-of-type {
    & p {
      font-size: 1.25rem;
      line-height: 1.5;
      font-weight: 400;
    }

    & > a:hover > div:only-child {
      background: repeating-linear-gradient(-45deg, #aaa1, #aaa1 10px, #ffff 10px, #ffff 20px);
    }

    & > div,
    & > a > div:only-child {
      max-width: 80%;
      padding: 0 1rem;
      margin: 2em auto;

      border: 3px solid black;
      box-shadow: 15px 15px 0 0 black;

      & > footer:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > time {
          font-size: 1rem;
          font-weight: 600;
          font-family: monospace;
        }
      }
    }

    & > section {
      border-bottom: 3px solid #aaa1;
      margin-bottom: 3em;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      & > section {
        display: grid;
        align-items: top;
        justify-content: left;
        grid-template-columns: minmax(100px, 1fr) minmax(min-content, 5fr);
        padding-bottom: 3em;
        column-gap: 2em;

        & > h2 {
          text-align: right;
        }
        & h2,
        & h3 {
          font-size: 18pt;
          padding: 0 0 0.2em 0;
          margin: 0 0;
        }
        & h4 {
          font-size: 14pt;
          padding: 0 0 0.2em 0;
          margin: 0 0;
          color: #aaa;
        }

        & > div {
          display: grid;
          align-items: top;
          justify-content: center;
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          column-gap: 1.5em;
          row-gap: 1em;

          &.expand > nav,
          &.expand > article {
            grid-column-start: span 5;
          }

          & > nav {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            font-weight: 600;
            font-size: 1em;
            row-gap: 0.2em;
          }
        }
      }
    }
  }

  & > footer:last-child {
    display: grid;
    align-items: top;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    column-gap: 1.5em;
    row-gap: 1em;

    /* border-top: 3px solid #222; */

    & > nav {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      font-weight: 600;
    }
  }
}