:root {
  --background-color: #1a1a1a;
  --foreground-color: #f0f0ea;
  --soft-color: #8a8a82;
  --accent-color: #a5453a;
  --rule-color: #333330;
  --code-bg: #242422;
}

[data-theme="light"] {
  --background-color: #f2f0ea;
  --foreground-color: #1a1a1a;
  --soft-color: #6b6a63;
  --accent-color: #921b0e;
  --rule-color: #d8d5cb;
  --code-bg: #e8e5da;
}

* {
  font-family: 'Times New Roman', Times, serif;
  color: var(--foreground-color);
  box-sizing: border-box;
}

body {
  background-color: var(--background-color);
  width: 80%;
  max-width: 700px;
  margin: auto;
  padding-top: 4%;
  padding-bottom: 6%;
  font-size: 12pt;
  line-height: 1.6;
}

a {
  color: var(--accent-color);
}
a:hover {
  text-decoration: none;
}

hr {
  border: none;
  border-top: 1px solid var(--rule-color);
  margin: 2em 0;
}

/* theme toggle */
#theme-toggle {
  background: none;
  border: 1px solid var(--rule-color);
  color: var(--soft-color);
  font-size: 10pt;
  padding: 0.2em 0.6em;
  cursor: pointer;
}
#theme-toggle:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* post lists on the main page */
#posts-section ul,
#sticky-posts-section ul,
#links-section ul {
  list-style: none;
  padding: 0;
}
#posts-section li,
#sticky-posts-section li,
#links-section li {
  margin: 0.5em 0;
}

#posts-section li::before,
#sticky-posts-section li::before,
#links-section li::before {
    content: "> ";
}

i.post-link-date {
  font-style: italic;
  color: #6b6b65;
  font-size: 11pt;
  text-decoration: none;
}
i.post-link-date::before {
  content: " // ";
}

/* post.html */
.back-link {
  display: inline-block;
  font-size: 10pt;
  color: var(--soft-color);
  text-decoration: none;
  margin-bottom: 2em;
}
.back-link:hover {
  color: var(--accent-color);
}

.meta {
  font-size: 10pt;
  color: var(--soft-color);
  margin: 0 0 1em;
}

#content h1:first-child {
  font-size: 1.8em;
  margin: 0 0 0.4em;
}
#content h1,
#content h2,
#content h3 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
#content h2 {
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 0.2em;
}

#content p {
  margin: 1em 0;
}

#content blockquote {
  margin: 1.2em 0;
  padding-left: 1em;
  border-left: 2px solid var(--accent-color);
  color: var(--soft-color);
  font-style: italic;
}

#content code {
  font-family: Consolas, Menlo, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
}

#content pre {
  background: var(--code-bg);
  padding: 1em;
  overflow-x: auto;
  line-height: 1.5;
}
#content pre code {
  background: none;
  padding: 0;
}

.state {
  color: var(--soft-color);
  font-size: 10pt;
}
.state.error {
  color: var(--accent-color);
}