:root {
  --box_foreground: #FFF8EF;
  --box_background: #2E2633;
  --color_foreground: #2E2633;
  --color-background: white;
  --box_link: #A97860;
  --color_link: #AB2346;

  --subheader_foreground: white;
  --subheader-background: #009DB2;

  --header-foreground: white;
  --header-background: #AB2346;

  --line: 1.5rem;
}

* {
  margin: 0px;
  padding: 0px;
  font-family: serif;
  line-height: var(--line);
}

em {
  font-style: normal;
  font-weight: bold;
}

html {
  color: var(--color_foreground);
  padding-bottom: 40px;
  background-color: var(--color-background);
  overflow-y: scroll;
}

body {
  max-width: 50rem;
  margin: 0px auto;
  word-break: break-word;
}

a, a:visited, a:active {
  color: var(--color_link);
}

h1, h2 {
  font-size: 1.4rem;
  padding: 0px;
  margin: calc(2 * var(--line)) 0px 0px 0px;
}

h1:first-child, h2:first-child {
  margin-top: 0px;
}

h1 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1rem;
  margin: var(--line) 0px 0px 0px;
}

header {
  display: flex;
  font-style: normal;
  color: var(--header-foreground);
  margin: 0px 0px calc(var(--line)) 1em;
}

header a.fn, header a.fn:visited, header a.fn:active {
  color: var(--header-foreground);
  background-color: var(--header-background);
}

header a.fn {
  display: block;
  font-family: 'Varela Round';
  font-size: 2.5rem;
  font-weight: normal;
  height: calc(3 * var(--line));
  line-height: calc(3 * var(--line));
  text-align: center;
  text-decoration: none;
  width: calc(1.75rem * 11);
}

header nav {
  margin-left: calc(1 * var(--line));
}

header nav a {
  color: var(--color_link);
  display: block;
  height: var(--line);
  min-width: 6rem;
  padding-left: var(--line);
  padding-right: 0rem;
  position: relative;
}

header nav a:before {
  background-color: var(--subheader-background);
  bottom: calc(var(--line) / 4);
  content: "";
  display: block;
  height: calc(var(--line) / 4);
  left: calc(var(--line) / 2);
  position: absolute;
  width: calc(var(--line) / 4);
}

header nav a:hover {
  color: white;
  background-color: var(--header-background);
}

#content {
  overflow: auto;
  margin: 0 1em;
}

#content img {
  margin: var(--line) auto;
  display: block;
  max-width: 100%;
}

#content video { max-width: 100%; }

#content a {
  overflow-wrap: break-word;
}

#content p.stamp {
  margin-top: 0px;
  color: var(--subheader-background);
}

#content pre pre {
  margin-top: 0;
  padding-left: 0.5rem;
}

#content .highlighter-rouge {
  border: 1px solid black;
  margin-top: var(--line);
  overflow: auto;
}

#content .highlight {
  background-color: transparent;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
}

#content .highlight .rouge-table { border-collapse: collapse; }
#content .highlight .rouge-code { padding: 0px; }
#content .highlight .rouge-gutter.gl {
  padding: 0rem 0.25rem 0px 0.25rem;
  background-color: #f0f0f0;
  text-align: right;
}

p > code, a > code, li > code {
  font-size: 1rem;
  background-color: #FDD;
  padding-left: 5px;
  padding-right: 5px;
}

#content pre, #content pre *, code {
  font-family: monospace;
}

#content pre.lineno {
  padding-left: 0;
}

#content aside {
  margin: var(--line) 0;
  padding: calc(var(--line) / 2);
  background-color: #f0f0f0;
}

#content h2 {
  font-weight: bold;
  font-size: 1.2em;
  margin-top: calc(2 * var(--line));
}

#content h2:first-child {
  margin-top: 0px;
}

#content blockquote {
  margin-top: var(--line);
  padding-left: var(--line);
  border-left: calc(var(--line) / 4) solid #ccc;
}

ol.article-list {
  margin-top: var(--line);
}

#content > ol, #content > ul {
  margin: var(--line) 0px;
  padding-left: 40px;
}

p:nth-child(n+2) {
  margin-top: var(--line);
}

p.post-date {
  margin-top: 0;
}

#content * + h2 {
  margin-top: calc(1 * var(--line));
}

.avatars {
  display: flex;
}

.avatars li {
  list-style-type: none;
}

.avatars img {
  max-width: 100px;
}

#content #kabutops {
  max-height: 400px;
  margin: 0px auto;
  display: block;
}

#content #crimping {
  max-width: 600px;
  margin: 0px auto;
  display: block;
}