body {
  --fg-color: hsl(0, 0%, 5%);
  --fg-color-alt: hsl(0, 0%, 40%);
  --bg-color: white;
  --border-color: #aaa;
  --spacing-unit: 20px;
}

html, body, code, pre, figure {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Times New Roman", serif;
  font-size: 135%;
  color: var(--fg-color);
  background-color: var(--bg-color);
  padding: var(--spacing-unit);
  max-width: 45em;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, .site-title {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
  font-size: calc(var(--spacing-unit) * 3);
}

pre {
    padding: calc(var(--spacing-unit) / 4);
    background-color: hsl(320, 10%, 97.5%);
    border-radius: calc(var(--spacing-unit) / 4);
}

pre, code {
  /* Note: Menlo does a better job of making box drawing characters a fixed width
     than the default monospace font. Monospace fonts are surprisingly bad at
     this! */
  font-family: "Menlo", monospace;
}

.post-meta {
    color: var(--fg-color-alt);
    font-size: 80%;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 70%;
}

sup {
  vertical-align: top;
}

sub {
  vertical-align: bottom;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
}

a[href$='.svg'] {
    display: block;
}
a[href$='.svg'] > object {
    pointer-events: none;
    max-width: 100%;
}

/**
 * Header
 */

.site-header {
  padding-bottom: var(--spacing-unit);
  display: flex;
}

.site-header > .site-title {
  flex: 1;
  font-weight: bold;
}

.site-title {
  font-size: var(--spacing-unit);
  margin: 0;
  padding: 0;
}

.site-nav {
}

.site-nav .page-link {
  text-decoration: none;
  color: var(--fg-color);
}

.site-nav .page-link svg {
  height: var(--spacing-unit);
  width: var(--spacing-unit);
}

.page-link:not(:last-child) {
  margin-right: calc(var(--spacing-unit) / 2);
}

/**
 * Footer.
 */

.site-footer {
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-unit);
  padding-top: var(--spacing-unit);
}