:root {
        --line: 1.4rem;
        --high: #f39;
    }
    
    #html {
        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", "Nimbus Sans Narrow",
            "Overpass", "Impact", sans-serif-condensed, 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.1208em;
    }
    
    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;
    }

    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: 3.33333vw;
        }
    
        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;
        }
    }