body {
  font-family: 'Source Serif Pro', serif;
  line-height: 1.5em;
}

#tab {
  padding: 0.5em;
}

#tab p {
  text-align: right;
}

article {
  margin-left: auto;
  margin-right: auto;

  width: 45em;
}

@media screen and (max-width: 75em) {
  article {
    width: 90%;
  }
}

header {
  margin-top: 3em;
  margin-bottom: 3em;
}

h2 {
  margin-top: 2em;
}

header h2 {
  margin-top: 1em;
}

p, td {
  text-align: justify;
}

li {
  margin-top: 0.5em;
}

a, a:visited {
  color: #FF355E;
  text-decoration: none;
}

a:hover {
  color: #AB274F;
  text-decoration: underline;
}

footer {
  margin-top: 4em;
}

footer p {
  text-align: center;
}

#overview {
  margin-top: 4em;
  margin-bottom: 8em;
  margin-left: -15em;
  margin-right: -15em;

  font-size: 80%;
  overflow-x: scroll;
}

@media screen and (max-width: 75em) {
  #overview {
    margin-left: 1em;
    margin-right: 1em;
  }
}

#overview h2 {
  text-align: center;
  margin-bottom: 2em;
  font-size: 200%;
}

#overview th {
  text-align: center;
}

#overview td {
  text-align: left;
  padding-left: 1em;
  padding-right: 1em;
}

#overview tr.odd {
  background-color: #f5f3f0;
}

@media screen and (min-width: 75em) {
  figure {
    margin-left: -10em;
    margin-right: -10em;
  }
}

figure img {
  width: 100%;
}

code {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9em;
}

.highlight {
  margin: 1em;
  padding: 0.25em;

  background-color: #f5f3f0;

  overflow-x: scroll;
}

p.coderef {
  font-size: 80%;
  text-align: right;
  margin-right: 1em;
}

p.coderef a {
  color: grey;
}