body {

  > main {
    
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 99fr;
    grid-template-rows: 1fr 98fr 1fr;
    font-family: var( --content-text-font-family );

    > header {
      grid-row: 1;
      grid-column: 1/3;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: var( --dark-border-color );
    }

    > footer {
      grid-row: 3;
      grid-column: 1/3;
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: var( --dark-border-color );
    }

    > nav {
      grid-row: 2;
      grid-column: 1/2;
      min-width: 200px;
      width: 300px;
      overflow: hidden;
      resize: horizontal;
      border-right-style: solid;
      border-right-width: 1px;
      border-right-color: var( --dark-border-color );
    }
      
  }

  > main[data-app-status=booting] {
    display: none
  }

  > main:not( [data-app-status=booting] ) {
    display: grid;
  }

}