html {
  display:                  grid;

  height:                   100%;
  max-height:               100dvh;
}

body {
  display:                  grid;
  grid-template-areas:
    'head'
    'main'
    'foot';
  grid-template-rows:       60px 1fr 50px;
  
  height:                   100%;
  max-height:               100dvh;
}

main {
  display:                  grid;
  grid-area:                main;
  overflow:                 hidden;
}

section {
  display:                  grid;
  grid-template-areas:      'mhead' 'mbody';
  grid-template-columns:    1fr;
  grid-template-rows:       60px 1fr;
}

h1 {
  grid-area:              mhead;
  text-align:             center;
  margin:                 auto;
  box-sizing:             border-box;

  width:                  100%;
}

nav-state {
  grid-area:              mbody;
}