#directions {
    width: 90%;
    clear: both;
    padding: 0 1em;
    margin: 0 1em;
}

#directions p {
    font-family: "Liberation Serif", serif;
    font-style: italic;
}

#inputarea {
    clear: both;
    padding: 1em;
    margin: 1em;
}

#results {
    clear: both;
    font-family: monospace; /* Use a fixed-width font */
    width: 80%;
    /* white-space: pre-wrap;  /\* Preserve line breaks and spaces *\/ */
    margin-top: 0.5em;
}

/* Colored H and T */
.heads {
    color: #8CD0D3; /* zenburn cyan/blue */
    font-weight: bold;
}

.tails {
    color: #CC9393; /* zenburn red */
    font-weight: bold;
}

/* Percentage bar */
.pct-bar {
    display: flex;
    height: 1.5em;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5em;
    border: 1px solid #4F4F4F;
}

.pct-bar-heads {
    background-color: #8CD0D3;
    height: 100%;
    transition: width 0.3s ease;
}

.pct-bar-tails {
    background-color: #CC9393;
    height: 100%;
    transition: width 0.3s ease;
}

/* Printing. The two halves of the bar are nothing but background colour, and
   browsers leave backgrounds out when printing unless "Background graphics"
   is ticked in the print dialog (it is off by default in Chrome), so the bar
   printed as an empty box. print-color-adjust: exact keeps these two
   backgrounds. A dark dividing line marks where heads ends and tails begins,
   because on a black-and-white printer the two colours are similar greys. */
.pct-bar-heads,
.pct-bar-tails {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .pct-bar-tails {
        box-sizing: border-box;
        border-left: 2px solid #2B2B2B;
    }
}

.pct-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25em;
    font-size: 0.9em;
}