:root {
  --bgcolor: #EFF1F5;
  --fontcolor: #4C4F69;
  --linkcolor: #7287FD;
  --visitedcolor: #8839ef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: #303446;
    --fontcolor: #c6d0f5;
    --linkcolor: #babbf1;
    --visitedcolor: #ca9ee6;
  }
}

html {
  overflow-y: scroll;
}

body {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
  font: 16px/1.75 monospace;
  letter-spacing: 0.03em;
  color: var(--fontcolor);
  background: var(--bgcolor);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 {
  line-height: 1.2;
}

a:link {
  color: var(--linkcolor);
}

a:visited {
  color: var(--visitedcolor);
}

a:active {
  color: var(--visitedcolor);
}

a:focus,
button:focus {
  outline: 3px dashed var(--linkcolor);
  outline-offset: 2px;
}

nav {
  margin: 1em 0;
  text-align: center;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  margin: 0 0.5em;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

.post-title {
  padding: 0.5em 0;
  font-size: 1rem;
}

img {
  max-width: 100%;
  margin: auto;
  display: block;
}

.siteicon {
  height: 1.25em;
  width: 1.25em;
  padding-right: 0.25em;
  display: inline-flex;
  vertical-align: top;
}