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

    #username {
      padding: 0 .5em;
      float: right;
    }
  }

  main {
    grid-column-start: span 9;
    display: flex;

    form {
      gap: 20px 5px;

      &#loginForm {
        label {
          min-width: 80px;
          max-width: calc(100% / 2 - 50px);
          width: 100%;
        }
      }

      &#menuForm {
        label {
          min-width: 50px;
          max-width: calc(100% / 4);

          &:has(>input#menuName) {
            max-width: 100%;
            width: 100%;
          }

          &:has(>input#menuArticleName) {
            min-width: 100px;
            max-width: calc(calc(100% - 75px)/2);
            width: 100%;
          }
        }

      }

      &#articleForm {
        label {
          min-width: 50px;
          max-width: calc(100% / 8 + 14px);

          &:has(>input#articleName) {
            min-width: 100px;
            max-width: calc(calc(100% - 200px)/1.5);
            width: 100%;
          }
        }
      }
    }
  }

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