html {
    height: 100%;
    background: linear-gradient(to bottom, #333 10em, #333 15em, #282828 17em, #282828);
}

body {
    color: #eee;
    font-family: 'DejaVu Sans Mono', monospace;
    font-variant-ligatures: none;
    margin: 0;
}

main {
    margin: auto 10%;
}

h1 {
    font-size: 400%;
    color: #ffb6c1;
    width: fit-content;
    margin-bottom: 0;
}

@supports (background-clip: text) {
    h1 {
        color: transparent !important;
        background: linear-gradient(to top right, #e07373, #ffb6c1);
        background-clip: text;
    }
}

@supports (-webkit-background-clip: text) {
    h1 {
        color: transparent !important;
        background: linear-gradient(to top right, #e07373, #ffb6c1);

        -webkit-background-clip: text;
        background-clip: text;
    }
}

@supports (-ms-background-clip: text) {
    h1 {
        color: transparent !important;
        background: linear-gradient(to top right, #e07373, #ffb6c1);
        -ms-background-clip: text;
        background-clip: text;
    }
}

@supports (-o-background-clip: text) {
    h1 {
        color: transparent !important;
        background: linear-gradient(to top right, #e07373, #ffb6c1);
        -o-background-clip: text;
        background-clip: text;
    }
}

h2 {
    color: #d68c98;

    margin-top: .5em;
    margin-bottom: 2em;
}

textarea {
    color: #eee;
    font-size: 14pt;
    font-family: inherit;
    font-variant-ligatures: inherit;
    font-weight: bold;

    background-color: #222;
    border: 0.2em solid gray;
    border-radius: 0.25em;

    box-sizing: border-box;
    padding: 8px;
    width: 100%;
    height: calc(1em + 16px + 0.4em + 4px);

    /* disable scrollbar and resizing handle */
    overflow-x: hidden;
    overflow-y: hidden;
    resize: none;
}

textarea:focus {
    outline: none;
    border-color: #bc989b;
}

.error {
    border-color: #cc3333 !important;
}

.d-error, .d-warning, .d-info {
    padding: 0.5em;
    margin-bottom: 0.5em;
}

.d-error {
    background-color: rgba(255, 0, 0, .075);
    border: 1px solid rgba(255, 0, 0, .35);
}

.d-warning {
    background-color: rgba(255, 255, 0, .05);
    border: 1px solid rgba(255, 255, 0, .25);
}

.d-info {
    background-color: rgba(0, 144, 255, .075);
    border: 1px solid rgba(0, 144, 255, .35);
}

.d-error span::before,
.d-warning span::before,
.d-info span::before {
    background-size: 1.25em 1.25em;
    background-repeat: no-repeat;
    padding-left: 2em;
}

.d-error span::before {
    content: 'Error: ';
    font-weight: bold;
    background-image: url('../img/error.png');
}

.d-warning span::before {
    content: 'Warning: ';
    font-weight: bold;
    background-image: url('../img/warning.png');
}

.d-info span::before {
    content: 'Info: ';
    font-weight: bold;
    background-image: url('../img/info.png');
}

.icon {
    display: inline;
    position: relative;
    top: 0.1em;
    width: 1em;
    height: 1em;
}

#diagnostics {
    margin-top: 2em;
}

#output {
    display: grid;

    margin-top: 2.5em;
    font-size: 14pt;
}

#examples, #prose {
    grid-row: 1;
    grid-column: 1;
}

#examples {
    color: #777;
    z-index: 1;
}

#examples, #examples li {
    user-select: none;
}

#examples ul {
    padding-left: 1em;
}

#examples li {
    margin-bottom: 0.25em;
    cursor: pointer;
}

#examples li:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
}

#examples li::marker {
    content: '';
}

#prose {
    z-index: 0;
    opacity: 0;
    white-space: pre-wrap;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fade-in {
    animation: fade-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

#debug-output {
    padding-top: 1em;
    white-space: pre;
    opacity: 50%;
    font-size: 100%;
}

#source {
    position: absolute;
    right: 1em;
    top: 1em;
}

#author {
    position: absolute;
    right: 1em;
    bottom: 1em;
}

a, a:visited {
    color: #ffb6c1;
}
