body{margin:1em auto; max-width:80em; padding:0 .62em 3.24em; font:1.2em/1.62 monospace;}

header { display: flex; justify-content: flex-end; }
footer { display: flex; justify-content: flex-end; gap: 10px;}

article { margin-top: 3em; margin-bottom: 3em;}

aside.metadata { color: #555; font-size: .8rem; }

ul.tag-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.tag-list > li {
    display: inline;
}


aside > dl { display: flex; flex-flow: row wrap; width: 25%; }
aside dt { font-weight: bold; flex-basis: 20%; padding: 2px 4px; text-align: right; }
aside dt::after { content: ":"; }
aside dd { flex-basis: 70%; flex-grow: 1; margin: 0; padding: 2px 4px; }

h1 { font-size: 2em; }
hgroup { margin-bottom: 2.7em; }

h1,h2,h3 { line-height:1.2; }

h2::before {
    content: "## ";
}

h3::before {
    content: "### ";
}

h4::before {
    content: "#### ";
}

a.external::after {
    content: "🔗"
}

blockquote {
    width: 80%;
    border-left: 7px solid #ccc;
    margin: 1.0em 0.4em;
    padding: 0.5em 0.5em;
}

figure {
    width: 80%;
    margin: auto;
    text-align: center;
    color: #555;
    font-size: .8rem;
}

figure, img {
    max-width: 100%;
}

table {
    width: 80%;
    margin: auto;
    border-collapse: collapse;
    border: 3px solid #ccc;
}

th, td {
    padding: 20px;
    border: 3px solid #ccc;
}

pre {
    background-color: #eee;
    margin-left: 1.0em;
    margin-righ: 1.0em;
    padding: 0.5em 0.5em;
}

code, pre > code {
    font-size: 0.8rem;
}

@media print{body{max-width:none}}