html {
    max-width: 80ch;
    margin: auto;
    line-height: 1.75;
    font-size: 1.25em;
    background-color: #f5f5f5;
    color: #1d1d1d;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

a {
    color: #1d1d1d;
}

/* footnote reference */
sup a {
    text-decoration: none;
    font-family: "Times New Roman";
    vertical-align: middle;
    user-select: none;
}

@media (hover: hover) {
    sup a:hover::after {
        position: absolute;
        background-color: #f5f5f5;
        content: "[" attr(href) "]";
    }
}

/* footnotes */
p[id]::before {
    color: #888;
    font-size: small;
    vertical-align: middle;
    content: "[" attr(id) "]";
}

li p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

img {
    display: block;
    margin: auto;
    max-width: 80%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0px 0px 16px 8px #ccc;
}

h1 {
    border-bottom: 1px solid #ccc;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin-top: 1em;
    margin-bottom: 0;
    line-height: 1.5;
    display: table;
    scroll-margin-top: 2em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none
}

details summary {
    cursor: pointer;
    list-style-type: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: '>';
    transform: scale(0.8, 1.25);
    font-family: "Courier New", "Courier", monospace;
    font-weight: bold;
    font-size: smaller;
    display: inline-block;
    vertical-align: top;
    width: 1em;
}

details[open] > summary::before {
    content: '\2228';
    transform: scale(1.25, 0.8);
}

details {
    line-height: 2em;
}

nav > details {
    margin-left: 1em;
    margin-top: 0.5em;
}

nav details > details {
    margin-left: 1em;
}

nav details > a {
    display: block;
    margin-left: 2.1em;
}

nav a {
    text-decoration: none;
}

@media (hover: hover) {
    nav a:hover {
        text-decoration: underline;
    }
}

header nav {
    font-size: 0.8em;
    font-weight: bold;
}

/* "body > header nav" is the main navigation menu */

body > header nav {
    float: right;
    padding-left: 2em;
}

body > header nav a {
    margin-left: 1em;
}

/* "main > header nav" is the breadcrumb menu */

main > header nav {
    float: left;
}

main > header nav a {
    display: inline-block;
}

main > header nav a::after {
    content: '>';
    transform: scale(0.8, 1.25);
    font-family: "Courier New", "Courier", monospace;
    display: inline-block;
    margin-left: 0.4em;
    margin-right: 0.2em;
    line-height: 0;
}

/* "h1 + dl" is for metadata shown under the heading */

h1 + dl {
    margin-top: 0em;
}

h1 + dl dt,
h1 + dl dd {
    font-size: small;
    display: inline;
    vertical-align: middle;
}

h1 + dl dt {
    margin: 0;
    font-weight: bolder;
    text-transform: capitalize;
}

h1 + dl dd {
    margin: 0 1em 0 0.5em;
}

/* "main > nav" is the content of an index or category page */
/* "main > nav > section" corresponds to a listing item in an index page */

main > nav > section {
    font-size: 1em;
    margin: 1em;
}

main > nav > section > * {
    display: table-cell;
}

main > nav > section > time {
    vertical-align: top;
    font-size: 0.75em;
    font-weight: bold;
    color: #888;
    margin-right: 1em;
    padding-top: 0.25em;
    width: 6em;
}

input, textarea {
    display: block;
    margin: 1em;
    width: 50%;
}

textarea {
    height: 4em;
}

iframe {
    border: 0;
    width: 100%;
    height: 1em;
}

blockquote {
    padding: 1em;
    background-color: #ddd;
    border-left: 4px solid #888;
    border-radius: 8px;
}

blockquote:before {
    content: "\201C";
    vertical-align: -0.4em;
    margin-right: 0.25em;
    line-height: 0.1em;
    font-size: 4em;
}

blockquote p {
  display: inline;
  font-style: italic;
}

:target {
    border: 1px solid #aaa;
    border-radius: 5px;
    animation: highlight 2s;
    background-color: #eee;
}

@keyframes highlight {
  0% {background: transparent;}
  10% {background: #b7d2f7;}
  100% {background: #eee;}
}