html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-gap: 4rem;
}

header,
footer {
  grid-column: 1 / span 5;
}

main {
  grid-column: 1 / span 3;

}

aside {
  grid-column: span 2;
}

@media (max-width: 700px) {

  main,
  aside {
    grid-column: 1 / span 5;
  }

}

body {
  margin: 0 auto;
  max-width: 72em;
  padding: 1em 0;
}

ul.section-nav {
  list-style-type: none;
  margin-top: 2rem;
  font-size: 1.25rem;
}

ul.section-nav ul {
  list-style-type: none;
}


div.highlighter-rouge pre {
  font-size: 1rem;
}