:root {
  --color-title: #d2c4ff;
  --color-bg: mistyrose;
  --color-metadata: #ffd4d4;
  --color-link: #8c2626;
  --color-code-bg: #ffdbdb;
  --color-code-text: brown;
}

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

ul {
  padding-left: 20px;
  list-style-position: outside;
}

li {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

body {
  padding: 3ch;
  margin: 0 auto;
  max-width: 108ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
}

header {
  width: 100%;
}

main {
  width: 100%;
  flex-grow: 1;
}

footer {
  width: 100%;
}

/* Homepage title bar */

#index-title-container {
  background: var(--color-title);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1em;
}

#index-title-text {
  margin: 0;
}

#index-title-image {
  height: 50px;
}

/* Post lists (shared between blog and reading lists) */

.post-list-item {
  margin-bottom: 15px;
}

.post-list-item-title a {
  text-decoration: none;
}

.post-list-item-subtitle {
  opacity: 0.6;
}

/* Article layout */

article img {
  width: 100%;
}

article .article-title {
  background: var(--color-title);
  padding: 5px;
}

article .article-metadata {
  padding: 1em;
  background-color: var(--color-metadata);
  font-style: italic;
  margin-bottom: 2em;
}

article .article-toc {
  padding: 1em;
  background-color: var(--color-metadata);
  margin-bottom: 2em;
}

article .article-metadata + .article-toc {
  padding-top: 0;
  margin-top: -2em;
}

article .article-toc nav {
  margin: 0;
  padding: 0;
}

article .article-toc nav ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
}

article .article-toc nav > ul {
  padding-left: 0;
}

article .article-toc nav li {
  margin-top: 0.3em;
  margin-bottom: 0;
}

article .article-toc nav > ul > li > ul {
  padding-left: 2em;
}

article code {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
}

article pre code {
  display: block;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  padding: 2em;
}