:root {
  --color-title-container: #d2c4ff;
  --color-main-bg: mistyrose;
  --color-article-contents: #ffd4d4;
  --article-title-bg: #f1c4ff;
  --color-anchors-default: #8c2626;
  --color-code-bg: #ffdbdb;
  --color-code-text: brown;
}

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

ul {
  padding-left: 20px;
}

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-main-bg);
}

header {
  width: 100%;
}

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

footer {
  width: 100%;
}

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

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

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

article.note {
  max-width: 500px;
}

article img {
  width: 100%;
}

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

article #article-contents {
  padding: 1em;
  background-color: var(--color-article-contents);
  margin-bottom: 2em;
}

article #article-contents div.h2-toc-item {
  margin-top: 0.3em;
  margin-left: 1em;
}

article #article-contents div.h3-toc-item {
  margin-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;
}