html {
    background: white;
    font: 16px Arial, sans-serif;
}
html, body {
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
h1, #info, label {
    font-size: 16px;
    margin: 0 4vw 0 0;
    float: right;
    display: inline-block;
    height: 6vh;
    line-height: 6vh;
}
textarea {
    resize: none;
    width: 45vw;
    float: left;
    height: 45vh;
    box-shadow: inset 0 0 .5em rgba(0, 0, 0, .2);
}
#result {
    width: 94vw;
    height: 48vh;
    clear: both;
}
textarea,
#result {
    margin: 2vh 2vw;
    border: 1px solid;
    white-space: pre;
    overflow: auto;
    padding: .5em;
    font-family: "Source Code Pro", Monaco, monospace;
    font-size: 80%;
}
#code {
    height: 41vh;
    margin-top: 0;
}

#result a {
    color: inherit !important;
    text-decoration: none;
}
#result a:hover {
    text-decoration: underline;
}
#result .black {
    color: #000000;
}
#result .brightblack {
    color: #585f66;
}
#result,
#result .white,
#result .default {
    color: #afb5ba;
}
#result .brightwhite {
    color: #fbfdff;
}
#result .red {
    color: #d6000b;
}
#result .brightred {
    color: #ff4757;
}
#result .yellow {
    color: #bf9e00;
}
#result .brightyellow {
    color: #fff150;
}
#result .green {
    color: #538700;
}
#result .brightgreen {
    color: #8aff15;
}
#result .cyan {
    color: #00b89f;
}
#result .brightcyan {
    color: #33fffe;
}
#result .blue {
    color: #237ffe;
}
#result .brightblue {
    color: #6babff;
}
#result .magenta {
    color: #bf1b99;
}
#result .brightmagenta {
    color: #ff4ac8;
}

#result,
#result .bg-black,
#result .bg-default {
    background-color: #000000;
}
#result .bg-white {
    background-color: #afb5ba;
}
#result .bg-red {
    background-color: #d6000b;
}
#result .bg-yellow {
    background-color: #bf9e00;
}
#result .bg-green {
    background-color: #538e00;
}
#result .bg-cyan {
    background-color: #00ccba;
}
#result .bg-blue {
    background-color: #237ffe;
}
#result .bg-magenta {
    background-color: #bf1b99;
}

.toast {
    position: fixed;
    bottom: 1em;
    left: 1em;
    right: 1em;
    height: 2em;
    line-height: 2em;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    border: 1px solid;
    border-radius: 2px;
    padding: 0 1em;
    font-weight: bold;
    font-size: 12px;
}
.toast.info {
    background: hsl(200, 100%, 95%);
    color: hsl(200, 40%, 50%);
    border-color: hsl(200, 40%, 70%);
    z-index: 0;
}
.toast.warn {
    background: hsl(60, 100%, 95%);
    color: hsl(60, 50%, 30%);
    border-color: hsl(60, 50%, 60%);
    z-index: 1;
}
.toast.error {
    background: hsl(340, 100%, 95%);
    color: hsl(340, 70%, 50%);
    border-color: hsl(340, 70%, 70%);
    z-index: 2;
}