html {height: 100%; min-height: 100vh; font-size: 16px;}

body {
 margin: 0;
 padding: 0;
 font-family: Jost, Verdana, "Open Sans", sans-serif;
 height: 100%; margin: 0; padding: 0;
 display: grid; grid-template-columns: max-content 1fr; grid-template-rows: max-content 1fr;
 grid-template-areas:
 'cima principal'
 'baixo principal';
}

header, footer {padding: 25px 40px; width: 128px;}

/* Header */

header {background-color: black; color: white; grid-area: cima; margin: 0; text-transform: uppercase;}
 .logo {margin: 0; padding: 0; line-height: 1.15; font-weight: 400; user-select: none; font-size: 1rem;}
 .logo b {font-weight: 600;}
 .logo a {color: white; text-decoration: none;}
 h1 {display: none;}
/* Principal */

main {background-color: whitesmoke; color: black; grid-area: principal; overflow: scroll; margin: 0; padding: 25px; font-family: Verdana, "Open Sans", sans-serif;}

/* Cabeçalho */

footer {background-color: black; color: white; grid-area: baixo; display: flex; flex-direction: column; justify-content: flex-end;}
 nav {margin: 0; padding: 0;}
 nav:nth-of-type(2) {margin-top: 40px;}
  ul {list-style-type: none; margin: 0; padding: 0;}
  ul a {text-decoration: none; color: white;}
  ul b {font-weight: 600;}

  /* Móveis */

@media (max-width: 640px) {
header, footer {width: auto;}
body {grid-template-columns: 1fr;
 grid-template-areas:
 'cima'
 'principal'
 'baixo';}
header {background-color: #a90000; padding: 25px 40px; display: flex; align-items: center; justify-content: space-between;}
header h1 {display: block; margin: 0 0 0 2rem; text-transform: uppercase; font-size: 1.5rem; font-weight: 600;}
.logo {font-size: 0.75rem;}
main {overflow: visible;}
footer {padding: 40px;}
nav ul li {margin-top: 0.25rem; margin-bottom: 0.25rem;}
}