body { 
  font-family: monospace; 
  display: flex; 
  max-width: 100%; 
  line-height: 1.3; 
  padding: 0 1em; 
  box-sizing: border-box; 
  background-color: #fafafa; 
  color: #070707; 
}

@media (min-width: 72ch) {
  body {
    max-width: 144ch;
  }
  figure {
    width: 72ch;
  }
}

nav { padding: 1em; }
nav ul { margin: 0; padding-left: 1em; }
#theme-toggle {
  display: block;
  margin-top: 0.5em;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-family: inherit;
}
main { margin-left: 2em; margin-right: 2em; }
figure { width: 100%; max-width: 72ch; margin-top: 2em; margin-bottom: 2em; }
figcaption { font-size: 80%; }

hr { border: none; border-top: 1px solid gray; margin: 2ex 0; }

.spaced-list > li { margin-bottom: 1ex; }

a { text-decoration: none; color: #13c; }
a:hover { text-decoration: underline; }
a:visited { color: #90a; }

a.footnote { vertical-align: super; font-size: .7em; }
.footnote > li { font-size: 85%; margin-top: 1ex; }

.nowrap { white-space: nowrap; }

html.dark body { background-color: #111111; color: #ffffff; }
html.dark a { color: #39f; }
html.dark a:visited { color: #96f; }


/* Hide pandoc header */
#title-block-header {
  display: none;
}

/* Code blocks */
pre {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 1em;
}

div.sourceCode {
  overflow-x: auto;
  margin: 1em 0;
}

code {
  font-family: monospace;
}

pre code {
  background-color: transparent;
  padding: 0;
}

html.dark pre {
  background-color: #222222;
}


html.dark code span.al { color: #ff8080; }
html.dark code span.an { color: #80c0d0; }
html.dark code span.at { color: #a0b050; }
html.dark code span.bn { color: #60c080; }
html.dark code span.bu { color: #40d060; }
html.dark code span.cf { color: #40c070; font-weight: bold; }
html.dark code span.ch { color: #60a0c0; }
html.dark code span.cn { color: #d06060; }
html.dark code span.co { color: #80a0a0; font-style: italic; }
html.dark code span.cv { color: #80c0c0; font-weight: bold; font-style: italic; }
html.dark code span.do { color: #d07070; font-style: italic; }
html.dark code span.dt { color: #b05050; }
html.dark code span.dv { color: #60c080; }
html.dark code span.er { color: #ff8080; font-weight: bold; }
html.dark code span.fl { color: #60c080; }
html.dark code span.fu { color: #6080f0; }
html.dark code span.im { color: #40d060; font-weight: bold; }
html.dark code span.kw { color: #40c070; font-weight: bold; }
html.dark code span.op { color: #a0a0a0; }
html.dark code span.ot { color: #40c070; }
html.dark code span.pp { color: #d0a040; }
html.dark code span.sc { color: #60a0c0; }
html.dark code span.ss { color: #c080a0; }
html.dark code span.st { color: #60a0c0; }
html.dark code span.va { color: #6070c0; }
html.dark code span.vs { color: #60a0c0; }
html.dark code span.wa { color: #80c0c0; font-weight: bold; font-style: italic; }


img {
  max-width: 100%;
  height: auto;
}

/* Album reviews layout */
.sort-reviews {
  margin: 2em 0;
}

.record {
  margin-bottom: 2em;
}

.record table {
  width: 100%;
}

.record td {
  vertical-align: top;
}

.record img {
  width: 12em;
  margin-right: 1em;
  margin-bottom: 1em;
}

@media (max-width: 768px) {
  .record img {
    width: 8em;
  }
  .record table {
    display: block;
  }
  .record td {
    display: block;
    width: 100%;
  }
  .record td:first-child {
    margin-bottom: 1em;
  }
}

.record h3 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.record h4 {
  color: #483d8b;
  margin-top: 0;
  margin-bottom: 0.25em;
  font-weight: normal;
}