:root {
  /* Base styles */
  --font-primary: 'IBM Plex Sans', Verdana, sans-serif;
  --color-primary-text: #444;
  --color-background: #fff;
  --color-headline: #222;
  --color-link: #3273dc;
  --color-link-hover: #3273dc;
  --color-selection: #FDD9B5;
  --color-selection-text: #333;
  /* Tags */
  --color-tag-bg: #FFE4C7;
  --color-tag-border: #FFCBA4;
  --color-tag-text: #D35400;
  --color-tag-hover: #FFD9B0;
  /* Dark mode */
  --color-background-dark: #333;
  --color-text-dark: #ddd;
  --color-headline-dark: #eee;
  --color-link-dark: #8cc2dd;
  --color-code-bg-dark: #777;
  --color-blockquote-dark: #ccc;
  --color-input-bg-dark: #252525;
  --color-helptext-dark: #aaa;
  /* Other elements */
  --color-blogpost-visited: #8b6fcb;
}


body {
  font-family: var(--font-primary);
  font-size: 16px;
  margin: auto;
  padding: 20px;
  max-width: 800px;
  text-align: left;
  background-color: var(--color-background);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  color: var(--color-primary-text);
}

html.dark body {
  color: #ddd;
  background-color: #333;
}

html.dark ::-moz-selection {
  background: #8CC2DD;
  color: #fff;
  text-shadow: none
}

html.dark ::selection {
  background: #8CC2DD;
  color: #fff;
  text-shadow: none
}

html.dark hr {
  border-color: #333;
}

html.dark blockquote {
  border-color: #ddd;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #ddd;
}

html.dark a,a:hover {
  color: #8CC2DD;
  text-decoration: none;
}

html.dark table tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.15);
}

html.dark .site-description a,
html.dark .site-description a:hover {
  color: #ddd;
  text-decoration: underline;
}

html.dark a:hover {
  opacity: 0.8;
}

html.dark .post-tags .tags a {
  border: 1px solid #ddd;
  color: #ddd;
}

html.dark .site-title a {
  color: #ddd;
  text-decoration: none !important;
}

html.dark .header nav,
html.dark .footer {
  border-color: #333;
}

html.dark .highlight {
  background-color: #333;
}