:root {
  /*
   * Base16 colours - see https://github.com/chriskempson/base16/blob/master/styling.md
   */

  /* https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/ */
  --dark-base00: hsl(265, 10%, 5%);
  /* Changed from 10% for contrast */
  --dark-base01: hsl(265, 9%, 15%);
  --dark-base02: hsl(265, 8%, 35%);
  --dark-base03: hsl(265, 7%, 40%);
  --dark-base04: hsl(265, 6%, 50%);
  --dark-base05: hsl(265, 5%, 55%);
  --dark-base06: hsl(265, 15%, 89%);
  --dark-base07: hsl(265, 25%, 99%);
  /* Changed from 94% for 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 - added 20% saturation from original*/
  --base08: hsl(335 69% 61%);
  --base09: hsl(15, 68%, 45%);
  --base0A: hsl(30, 66%, 43%);
  --base0B: hsl(180, 75%, 37%);
  --base0C: hsl(205, 75%, 50%);
  --base0D: hsl(230, 85%, 60%);
  --base0E: hsl(265, 95%, 63%);
  --base0F: hsl(300, 70%, 50%);
}

/* Reverse order of base colour gradient for dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --base00: var(--dark-base00);
    --base01: var(--dark-base01);
    --base02: var(--dark-base02);
    --base03: var(--dark-base03);
    --base04: var(--dark-base04);
    --base05: var(--dark-base05);
    --base06: var(--dark-base06);
    --base07: var(--dark-base07);
  }
}

:root {
  --bg-color: var(--base00);
  --title-color: var(--base05);
  --heading-color: var(--base08);
  --text-color: var(--base07);
  --subtle-dash-color: var(--base01);
  --dim-text-color: var(--base06);
  --link-color: var(--base05);
  --link-underline-color: var(--base0D);
  --diamond-color: var(--base0E);
  --code-border-color: var(--subtle-dash-color);
}

* {
  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: 'Karla', sans-serif;
  font-weight: 300;
  color: var(--text-color);
  background-color: var(--bg-color);
}

html {
  font-size: 18px;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6
header {
  font-weight: 700;
  color: var(--heading-color);
}

/* Main page heading has a subtler colour */
main > h1:first-child {
  color: var(--title-color);
}

/* Larger fonts have larger leading space, so shift left to align nicely */
h1 {
  margin-left: -0.05em;
}
h2 {
  margin-left: -0.04em;
}

/* Space out subheads between body text */
h2, h3, h4, h5, h6 {
  margin: 1em 0;
  /* margin-bottom: 1em; */
}

p:last-child {
  margin-bottom: 0;
}

/* Center standalone images */
p>img:only-child {
  margin: auto;
  display: block;
}

p,
.tmpl-post li {
  line-height: 1.8em;
}

.home a[href],
.home a[href]:visited {
  color: var(--heading-color);
}
 
a[href],
a[href] code,
a[href]:visited,
a[href]:visited code {
  color: var(--link-color);
  text-decoration-color: var(--link-underline-color);
}

a[href]:active,
a[href]:active code {
  color: var(--link-underline-color);
}

header,
main,
footer {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

main {
  padding: 1rem;
}

/* Stop first heading from having extra margin */
main > h1:first-child {
  margin-top: 0;
}

header {
  border-bottom: 1px dashed var(--subtle-dash-color);
}

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-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

/* Adjust code inline with text to match the surrounding text, but dimmer */
code {
  font-size: 17px; /* Visually same as 18px body font */
  color: var(--dim-text-color);
}

pre, pre code {
  color: var(--text-color); /* To reset dimming of inline code */
  font-size: 15px; /* Smaller than body text */
}

pre {
  /* Text handling */
  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;
  /* Border around */
  padding: 1em;
  margin: .5em 0;
  border: 1px solid var(--code-border-color);
  background-color: var(--bg-color);
  /* Scrollbar */
  overflow: auto;
  scrollbar-color: var(--base01) var(--bg-color);
}

/* Small caps text variant */
span.small-caps {
  text-transform: uppercase;
}

main ul {
  list-style: none;
}
main ul li::before {
  content: "•";
  margin-right: .5rem;
  float: left;
}
/* Set space between list items to same as space between paragraphs */
main li {
  margin: 1rem;
}

blockquote {
  font-style: italic;
}

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

/* Diamond in header */
.diamond {
  color: var(--diamond-color);
  animation: fadeIn linear 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}
div.diamond {
  text-align: center;
  display: block;
  margin-bottom: 1em;
  cursor: pointer;
}

/* 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(--dim-text-color);
}
.postlist-date {
  display: inline-block;
  word-spacing: -0.02em;
  letter-spacing: -0.02em;
}
.postlist span {
  display: inline;
  font-style: italic;
}

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

/* Navigation at the footer of posts */
ul.post-nav {
  padding-left: 0;
}
ul.post-nav li.next::before {
  content: "→";
  color: var(--link-underline-color);
}
ul.post-nav li.previous::before {
  content: "←";
  color: var(--link-underline-color);
}