@font-face {
  font-family: 'Go Regular';
  src: url('/static/fonts/Go-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Go Mono';
  src: url('/static/fonts/Go-Mono.ttf') format('truetype');
}

@font-face {
  font-family: 'Go Italic';
  src: url('/static/fonts/Go-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Go Bold';
  src: url('/static/fonts/Go-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Go Mono Bold';
  src: url('/static/fonts/Go-Mono-Bold.ttf') format('truetype');
}

body {
  font-family: 'Go Regular';
  line-height: 1.4;
  font-size: 15px;
}

p {
  margin-bottom: 10px;
}

/* Stop `sup` pushing up the line box making line heights inconsistent. */
sup {
  vertical-align: top;
  position: relative;
  top: -0.5em;
}

@media screen and (min-width: 800px) {
  body {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 5em;
    margin-right: 5em;
  }
}

code {
  font-family: 'Go Mono';
}

strong {
  font-family: 'Go Bold';
  /* The font itself is bolded so don't also have the browser bold it. */
  font-weight: normal;
}

strong>code {
  font-family: 'Go Mono Bold';
}

em {
  font-family: 'Go Italic';
  /* As with strong but for italicisation: this font renders as italic
   * so don't have the browser add more.
   */
  font-style: normal;
}

del {
  text-decoration: line-through;
}

.footnote-definition {
  font-size: 0.9em;
  margin: 0.5em 0;
}

.footnote-definition p {
  display: inline;
}

/*
 * Code _blocks_ are `code` elements inside a `pre` element, whereas
 * inline code is just a `code` element.
 */
pre>code {
  display: inline-block;
  margin-left: 2em;
}

.draft-prompt {
  background-color: lightgrey;
  padding: 2em;
}

footer {
  line-height: 2;
  text-align: center;
}

.footer-divider {
  margin-top: 2em;
  width: 50%;
}

.nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "home . . . tags";
}

.nav-home {
  grid-area: home-start;
}

.nav-tags {
  grid-area: tags-start;
  justify-self: end;
}

table, th, td {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}