header {
  max-width: var(--width-deco);
  height: var(--height-header);

  margin: 0 auto var(--margin-header) auto;
  padding-bottom: calc(var(--height-header) / 4);

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;

  border-bottom: var(--color-light) 2px solid;

  & img {
    height: var(--height-header);
  }

  & nav {
    & > ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 0.25rem 1rem;

      max-height: var(--height-header);

      list-style-type: none;
      margin: 0;

      & > li {
        margin-bottom: 0;
      }
    }

    & a {
      display: block;

      padding: 0 1rem 0 0;

      font-family: monospace;
    }
  }
  @media only screen and (max-width: 600px) {
    flex-direction: column;
    align-items: normal;

    height: auto;
    min-height: var(--height-header);

    padding-bottom: 1rem;

    & nav > ul {
      flex-direction: column;
      max-height: unset;
      gap: 0.5rem;
    }

    & img {
      height: 100%;
      width: max(33%, 128px);
      margin: 0 auto;
    }
  }
}

footer {
  max-width: var(--width-deco);
  height: var(--height-header);

  margin: var(--margin-header) auto 0 auto;
  padding: 2rem 0;

  border-top: var(--color-light) 2px solid;

  font-size: var(--font-size-tiny);
}