:root {
  /*
   * Base16 colours - see https://github.com/chriskempson/base16/blob/master/styling.md
   *
   * prism.js Atelier Sulphurpool
   * @author Bram de Haan (http://atelierbramdehaan.nl)
   */

  /* Orig values for sulphurpool theme */
  /* --orig-base00: #202746; */
  --dark-base00: #080a12; /* was #202746, darkened for more contrast */
  --dark-base01: #293256;
  --dark-base02: #5e6687;
  --dark-base03: #6b7394;
  --dark-base04: #898ea4;
  --dark-base05: #979db4;
  --dark-base06: #dfe2f1;
  --dark-base07: #fcfdff;/* was #f5f7ff, lightened for more contrast */

  /* Reverse dark-base00-07 for light theme */
  --base00: var(--dark-base07);
  --base01: var(--dark-base06);
  --base02: var(--dark-base05);
  --base03: var(--dark-base04);
  --base04: var(--dark-base03);
  --base05: var(--dark-base02);
  --base06: var(--dark-base01);
  --base07: var(--dark-base00);

  /* Palette for sulphurpool */
  --base08: #c94922;
  --base09: #c76b29;
  --base0A: #c08b30;
  --base0B: #ac9739;
  --base0C: #22a2c9;
  --base0D: #3d8fd1;
  --base0E: #6679cc;
  --base0F: #9c637a;
}
* {
  box-sizing: border-box;
}

/*
 * Based on https://github.com/11ty/eleventy-base-blog/blob/master/css/index.css
 * MIT license
 */
html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Spectral', serif;
  font-weight: 400;
  color: var(--base07);
  background-color: var(--base00);
}
html {
  font-size: 19px;
  text-rendering: optimizeLegibility;
}
h1, header {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
}
h1 {
  color: var(--base05);
}
h2, h3, h4, h5, h6 {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  color: var(--base08);
}
p:last-child {
  margin-bottom: 0;
}
p > img:only-child {
  margin: auto;
  display: block;
}
p,
.tmpl-post li {
  line-height: 1.45em;
}
h1.home > a[href] {
  color: var(--base08);
}
h1.home > a[href]:visited {
  color: var(--base08);
}
a[href],
a[href] code {
  color: var(--base0E);
}
a[href]:visited,
a[href]:visited code {
  color: var(--base0F);
}
header, main, footer {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
main {
  padding: 1rem;
}
main :first-child {
  margin-top: 0;
}
header {
  border-bottom: 1px dashed var(--base01);
}
header:after {
  content: "";
  display: table;
  clear: both;
}
table {
  margin: 1em 0;
}
table td,
table th {
  padding-right: 1em;
}

pre,
code {
  font-family: 'Overpass Mono', monospace;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
code {
  letter-spacing: -0.03em;
  color: var(--base06);
}
pre {
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  padding: 1em;
  margin: .5em 0;
  border: 1px solid var(--base01);
  background-color: var(--base00); /* base07 */
  overflow: auto;
}

/* Header */
.home {
  padding: 0 1rem;
  float: left;
  margin: 1rem 0;
  font-size: 1em;
}
.home :link:not(:hover) {
  text-decoration: none;
}

/* Nav */
.nav {
  padding: 0;
  list-style: none;
  float: left;
  margin-left: 1em;
}
.nav-item {
  display: inline-block;
  margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
  text-decoration: none;
}
.nav-item-active {
  font-weight: 700;
  text-decoration: underline;
}

/* Posts list */
.postlist {
  list-style: none;
  padding: 0;
}
.postlist-item {
  margin: 1em 0;
}
.postlist-item:last-child {
  margin-bottom: 0;
}
.postlist-date,
.postlist-item:before {
  color: var(--darkgray);
}
.postlist-date {
  display: inline-block;
  word-spacing: -0.02em;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  font-family: 'Spectral SC', serif;
}
.postlist summary {
  display: inline;
  font-style: italic;
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}
.tmpl-home .postlist-link {
  font-weight: 600;
}

/* Tags */
.post-tag {
  padding: 4px 4px;
  font-family: 'Karla', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

span.small-caps {
  text-transform: lowercase;
  font-family: 'Spectral SC', serif;
}

.diamond {
  color: var(--base08);
  animation: fadeIn linear 2s;
}

@keyframes fadeIn {
  0% {opacity:0.3;}
  100% {opacity:1;}
}

div.diamond {
  text-align: center;
  display: block;
  margin-bottom: 1em;
}

main ul {
  list-style: none;
}
main ul li::before {
  content: "•";
  margin-right: .5rem;
  float: left;
}

blockquote {
  font-style: italic;
}