:root {
  --color-bg-dk: #202224;
  --color-text-lt: #343433;
  --color-text-dk: #f0f1f2;
  --color-link-dk: #76b6ff;
  --color-link-visited-dk: #d0a2ff;
  --color-border-lt: #e6e4e2;
  --color-border-dk: #4d5053;;
}

*,
:before,
:after {
  box-sizing: border-box;
}

body {
  max-width: 45rem;
  padding: 3rem 2rem;
  margin: auto;
  line-height: 1.4;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  text-rendering: optimizeLegibility;
  color: var(--color-text-lt);
}

figure {
  margin: 0;
}
img {
  width: 100%;
}

blockquote {
  border-left: 5px solid var(--color-border-lt);
  padding: 0 1rem;
  margin: 0 0 0 1rem;
  font-style: italic;
}

code {
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  font-size: 0.85rem;
}
pre {
  padding-left: 2rem;
  overflow: visible;
}
pre > code {
  white-space: pre;
  position: relative;
}

nav > a, nav > a:visited {
  color: var(--color-text-lt);
}

p.date {
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--color-text-dk);
    background: var(--color-bg-dk);
  }

  blockquote {
    border-left-color: var(--color-border-dk);
  }

  a:link {
    color: var(--color-link-dk);
  }
  a:visited {
    color: var(--color-link-visited-dk);
  }
  nav > a, nav > a:visited {
    color: var(--color-text-dk);
  }
}

@media print {
  pre > code {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
}