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

@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, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-top: 1em;
  color: var(--fontcolor);
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.5em;
  margin-bottom: 0.3em;
}

h3 {
  font-size: 1.2em;
  margin-bottom: 0.2em;
}

p {
  margin: 0.7em 0;
}

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

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: disc;
  padding-left: 1.25em;
}

code {
  background-color: rgba(200, 200, 255, 0.1);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-family: monospace;
}

pre {
  padding: 1em;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-family: monospace;
  margin: 1em 0;
}

img, iframe {
  max-width: 100%;
  margin: 1em auto;
  display: block;
  border-radius: var(--image-radius);
}

.img {
  max-width: 100%;
  border-radius: var(--image-radius);
  display: block;
  margin: 1em auto;
}

footer {
  text-align: center;
  margin-top: 3em;
  padding-top: 1em;
  font-size: 0.9em;
  border-top: 1px solid rgba(120,120,120,0.3);
}

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