body {
    margin: 1em auto;
    max-width: 42em;
    padding: 0 0.62em;
    font: 1.2em/1.62 sans-serif;
    color: #222;
    hyphens: auto;
}
h1, h2, h3 { line-height:1.2 }

a { text-decoration:none }
a:hover { text-decoration:underline }

code, pre {
    background-color: #eee;
    color: #000;
    padding: 0 3px;
}

blockquote {
    line-height:1.2em;
    margin: 0;
    padding-left: 0.8em;
    border-style: solid;
    border-width: 0 0 0 8px;
    border-color: rgba(0, 102, 0, 0.25);
}

@media print {
    body { max-width:none }
    .noprint { display:none }
}

header.site {
    border-color: #060;
    border-width: thick 0;
    border-style: solid;
    margin-bottom: 2em;
}
header.site { display:flex }
header.site > p { flex:1 }
header.site .right { flex:3; text-align:right }

header.page p { text-align:right; margin:0; padding:0 }

figure { margin:1em 0; background-color:#efefef; text-align:center; font-size:smaller }
figure img { max-width:100%; height:auto }
figure figcaption { padding:0.4em }
figure figcaption .meta { text-align:right; display:block }

footer {
    margin-top: 2em;
    font-size: smaller;
    text-align: right;
}
footer ul {
    list-style-type: none;
}
footer ul li {
    display: inline-block;
    margin-left: 1em;
}
#comments { text-align: left; }
#comments ol { list-style-type: none; }
.comment-instructions { font-style: italic; text-align: center; }