/* stylelint-disable no-descending-specificity */
body {
  header {
    grid-column-start: span 12;

    h1 {
      flex-grow: 1;

      a {
        display: block;
      }

      #username {
        display: block;
        margin-top: .3em;
      }
    }
  }

  main {
    grid-column-start: span 12;

    form {
      flex-wrap: wrap;

      label {
        width: 48%;
        max-width: 48%;
      }

      &#articleForm {
        label {
          &:has(>input#articleName) {
            min-width: 100px;
            max-width: 100%;
            width: 100%;
          }
        }
      }

      &#loginForm {
        label {
          min-width: 100px;
          max-width: 100%;
          width: 100%;
        }
      }

      &#menuForm {
        label {
          &:has(>input#menuName),
          &:has(>input#menuArticleName) {
            min-width: 100px;
            max-width: 100%;
            width: 100%;
          }
        }
      }

      button {
        line-height: 2em;
        flex-grow: 1;

        &.icon-button {
          height: 66px;
          width: 66px;
          max-width: 66px;
          margin-left: 5px;

          &+.icon-button {
            margin-left: 15px;
          }
        }
      }
    }

    table {
      tfoot td,
      th:nth-child(4),
      td:nth-child(4),
      th:nth-child(3),
      td:nth-child(3) {
        display: none;
      }
    }
  }

  aside {
    grid-column-start: span 12;
  }
}