/* reset */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, li, figure, figcaption, hr, fieldset, legend { margin: 0; padding: 0; }


/* layout, fonts */
body {
  max-width: 700px; margin: 0 auto; padding: 0.5rem 1rem;
  font-size: 1rem; line-height: 1.5;
  font-family: system-ui, sans-serif; font-weight: normal;
  overflow-x: hidden;
}
@media (max-width: 600px) { body { font-size: 1rem; padding: 3em 2em 4em 2em; } }
@media (min-width: 601px) { body { font-size: 1.1rem; } }


/* basic elements in an article/document */
h1, h2, h3, h4, h5, h6 { font-size: 1.08em; margin-top: 1rem; margin-bottom: 0.4rem; }
#title { font-size: 1.5em; font-weight: bold; font-style: italic; }
h1     { font-size: 1.2em; }
h2     { font-size: 1em; }
h3     { margin-left: 0.6em; }

a { color: #666; text-decoration: none; font-style: italic; }
a:hover { background-color: #f0f0f0; }
.reset-text-style { font-size: inherit; letter-spacing: 0; text-transform: none; }

p { margin-bottom: 1em; }

ul, ol { padding-left: 2px; list-style: none; }
ul ul, ul ol,
ol ul, ol ol { margin-top: 0; margin-bottom: 0; margin-left: 1.5em; }
ul li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 4px;
  background-color: #aaa;
  margin-right: 8px;
  margin-top: -3px;
  vertical-align: middle;
}

table  { border-collapse: collapse; margin: 1em 0; }
td     { border-top: 1px solid #ddd; }
th, td { border-bottom: 1px solid #ddd; padding: 0.5em 1em; }
th     { font-weight: normal; font-style: italic; }
td:first-child, th:first-child             { text-align: left; }
td:not(:first-child), th:not(:first-child) { text-align: center; }

pre, code {
  font-size: 0.98rem;
  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
  font-weight: normal;
  background-color: #f4f4f4;
  word-wrap: break-word;
}
pre {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  margin: 1em 0;
}

.footnotes { margin-top: 2em; }

figure { margin: 1em 0; }
figure, img { max-width: 100%; }

figure figcaption { text-align: center; font-style: italic; }

/* collapsible headings */
.collapsible-checkbox { display: none; }

.collapsible-content { display: none; }
.collapsible-checkbox:checked ~ .collapsible-content { display: block; }

/* arrows on headings */
.collapsible-label h1::before,
.collapsible-label h2::before,
.collapsible-label h3::before,
.collapsible-label h4::before,
.collapsible-label h5::before,
.collapsible-label h6::before {
  content: ' ';
  width: 0;
  height: 0;
  display: inline-block;
  margin-right: 0.3rem;

  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left: 0.4rem solid #aaa;
  border-right: 0.4rem solid transparent;
}
.collapsible-checkbox:checked ~ .collapsible-label h1::before,
.collapsible-checkbox:checked ~ .collapsible-label h2::before,
.collapsible-checkbox:checked ~ .collapsible-label h3::before,
.collapsible-checkbox:checked ~ .collapsible-label h4::before,
.collapsible-checkbox:checked ~ .collapsible-label h5::before,
.collapsible-checkbox:checked ~ .collapsible-label h6::before {
  content: ' ';
  width: 0;
  height: 0;
  display: inline-block;
  margin-right: 0.3rem;

  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.4rem solid #aaa;
  border-bottom: 0.4rem solid transparent;
}