#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;
}

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