body {
  background-color: white;
  color: black;
  font-family: 'Roboto', sans-serif;
}

@media screen and (min-width: 58em) {
  body {
    display: grid;
    grid-template-columns: auto 44em 15em auto;
    grid-column-gap: 1em;
  }

  #TOC {
    grid-column: 3;
    grid-row: 2;
    top: 1em;
    position: sticky;
    align-self: start;
    max-width: 15em;
  }

  section {
    box-shadow: 6px 6px pink;
    border-right: 1px solid white;
  }
}

section {
  grid-column: 2;
  background-color: #aee6da;
  padding: 2em;
  line-height: 1.4em;
  box-shadow: 6px 6px pink;
  border-right: 1px solid white;
}

section:last-child {
  border-bottom: 1px solid white;
  margin-bottom: 5em;
}

section a {
  color: black;
}

section h2 {
  line-height: 2em;
  text-align: left;
  border-bottom: 2px solid black;
  font-family: 'Signika', sans-serif;
}

section pre {
  background-color: #07332a;
  color: white;
  padding: 1em;
  line-height: 1.2em;
  font-size: 120%;
}

header {
  grid-column: 2;
  text-align: center;
  background-color: #1da88c;
  padding: 2em;
  margin: 1em 0em;
  font-family: 'Signika', sans-serif;
  box-shadow: 6px 6px pink;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

header h1 {
  text-transform: uppercase;
  text-shadow: 0 0.7em #aee6da;
}

header .author {
}

#TOC {
  padding-top: 1em;
  background-color: #1da88c;
  padding-right: 2em;
  box-shadow: 6px 6px pink;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  margin-bottom: 2em;
}

#TOC ul {
  list-style-type: none;
}

#TOC li a {
  color: black;
  text-decoration: none;
}

#TOC li {
  padding-bottom: 1em;
}

img {
  width: 40em;
}