:root{--body-color:#E2E2E2;--header-color:#D6D6D6;--text-color:#1F1F1F}body{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr 1fr;margin:0;overflow:hidden;height:100vh;color:var(--text-color);font-family:Arial,Helvetica,sans-serif}header{grid-column:1/4;grid-row:1;background-color:var(--header-color);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto}header h1{grid-column:1/4;grid-row:1;margin:.25em 0}h1{text-align:center}h1 a{color:var(--text-color);text-decoration:none}header button{grid-column:2;grid-row:2;border-radius:10px 10px 0 0;padding:10px;font-size:1.1em;background-color:var(--text-color);color:var(--body-color);border:1px solid var(--body-color);cursor:pointer}main{grid-column:1/4;grid-row:2/4;background-color:var(--body-color)}nav{grid-column:1/4;grid-row:2/4;position:relative;display:grid;grid-template-rows:auto auto 1fr;background-color:var(--body-color)}main,nav{overflow-y:scroll}.nav-menu{display:grid;grid-auto-rows:fit-content(50px);margin-bottom:2em;list-style-type:none;padding-left:0}.nav-menu li{margin:5px 0}nav a{color:var(--text-color);font-size:1.2em}article,footer,nav{padding:20px}article{max-width:70ch;box-sizing:content-box;margin:0 auto;min-height:70vh}article h1{font-size:2em}footer{background-color:var(--text-color)}footer,footer a{color:var(--body-color)}.hidden{pointer-events:none;opacity:0}@media screen and (min-width:768px){nav ul{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1200px){nav{margin-top:-3px;box-sizing:border-box;overflow:hidden}header button{box-sizing:border-box}nav ul{grid-template-columns:repeat(3,1fr)}}