:root {
    --line: 1.4rem;
    --high: #f39;
    font-size: 16pt;
}

body {
    margin: 0;
    padding: 0;
}

article {
    width: 28rem;
    margin: var(--line) auto;
    padding: 0 10rem 0 0;
    line-height: var(--line);
}

p {
    margin: 0 0 var(--line);
}

h1, h2, h3, b {
    font-family: "Bahnschrift", "DIN Alternate", "DIN", "FF DIN",
        "Franklin Gothic Medium", "Ubuntu", "PT Sans Narrow",
        "Nimbus Sans Narrow", "Overpass", "Impact", sans-serif;
    font-stretch: semi-condensed;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

b {
    font-size: 0.93333em;
}

h1 {
    font-size: var(--line);
    margin: 3.0em 0 1.0em;
}

h2 {
    font-size: 1.0em;
    color: white;
    background-color: black;

    float: left;
    clear: left;
    max-width: 14em;
    margin: var(--line) var(--line) var(--line) calc(-2 * var(--line));
    padding: calc(var(--line) / 2);
    text-align: center;
    transform: rotate(-5deg);
}

h2 + p {
    padding: calc(2 * var(--line)) 0 0;
}

h3 {
    float: left;
    clear: left;
    margin: 0 0.7em 0 calc(-1 * var(--line));
    padding: 0;
    font-size: 0.93333em;
}

h3 + p {
    margin-top: var(--line);
}

aside {
    float: right;
    clear: right;
    width: 8rem;
    margin: 0 -10rem var(--line) var(--line);
    font-size: 0.8333em;
    color: #666;
}

section {
    margin: var(--line) 0;
    padding: 0;
}

p.tag {
    padding: calc(1 * var(--line)) 0 0;
    margin: 0;
    text-align: right;
}

a {
    color: var(--high);
    text-decoration: none;
}

a:hover {
    color: black;
    background-color: var(--high);
    outline: 0.1em solid var(--high);
}

a:focus,
a:active {
    color: white;
    background-color: black;
    outline: 0.1em solid black;
}

.note {
    line-height: 0;
    color: var(--high);
    font-size: 1rem;
    font-style: normal;
    letter-spacing: -0.04em;
}

hr {
    width: 8em;
    margin: calc(1.5 * var(--line) - 0.35em / 2) auto;
    border: none;
    border-top: dotted 0.35em black;
}

p.cmd::before {
    content: ">\00a0";
    font-style: normal;
}

p.cmd {
    margin: 0;
    color: slategray;
    font-style: italic;
}

cmd {
    color: slategray;
    font-style: italic;
}

code {
    font-family: "Consolas", monospace;
    font-size: 0.9em;
}

aside cmd {
    color: var(--high);
}

header {
    border-bottom: 0.05rem var(--high) solid;
    margin-bottom: var(--line);
}

header > div {
    font-family: "Calibri Light", "Calibri",
        "Helvetica Neue", "Arial", sans-serif;
    font-weight: 200;
    font-size: 0.9em;
    width: 38rem;
    margin: var(--line) auto 0;
}

header > div > a {
    color: slategray;
}

@media print {    
    :root {
        font-size: 2.63158vw;
    }

    p.tag {
        text-align: left;
    }

    h2 {
        color: black;
        background-color: white;
        border: black solid thin;

        float: right;
        clear: right;
        max-width: 14em;
        margin: var(--line) calc(-2 * var(--line)) var(--line) var(--line);
        padding: calc(var(--line) / 2);
        text-align: center;
        transform: rotate(5deg);
    }

    header {
        display: none;
    }
}