*, *::before, *::after {
  box-sizing: border-box;
  font-weight: normal;
  margin: 0;
}

html {
}

body {
    height: 100vh;
    width: 100vh;
    overflow: hidden;
}

header {
    overflow: hidden;
    grid-area: head;
}

.view {
    height: 100svh;
    width: 100svw;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(19, 1fr);
    grid-template-areas: 
        "head head head head head head"
        "head head head head head head"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "main main main main aux  aux"
        "nav  nav  nav  nav  nav  nav" 
        "foot foot foot foot foot foot";
}

footer {
    align-self: stretch;
    grid-area: foot;
    overflow: hidden;
}


nav {
    align-self: stretch;
    grid-area: nav;
    overflow-y: visible;
    overflow-x: hidden;
}

p.h1 {
    
}
p.body {
}
  
.main {
    grid-area: main;
    overflow-x: hidden;
    overflow-y: scroll;
}

.alternate {
    grid-area: aux;
}

.alternate .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }