body {
  height: calc(100vh - 10px);
  padding: 5px;
  margin: 0;

  font-family: sans-serif;
  text-transform: uppercase;
}

p {
  font-family: serif;
  text-transform: none;
}

holy-grail {
  height: 100%;
}

holy-grail > * {
  padding: 5px;
}

header {
  background: #ffcdd2;
}

footer {
  background: #ffecb3;
}

nav {
  background: #bbdefb;
}

holy-grail::part(side-start),
holy-grail::part(side-end) {
  background: #e1bee7;
}

holy-grail::part(main) {
  background: #dcedc8;
}