.asciidoc {
    font-family: sans-serif;

    @import "./asciidocBootSlate";
    @import "~highlight.js/scss/atom-one-dark";

    h1 {
        color: var(--repl_color-link, #2ac02a);
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.2em;
    }
    h4 {
        font-size: 1.1em;
    }

    h2,
    h3 {
        font-weight: bold;
        text-decoration: underline;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--repl_color, #188a18);
    }

    #preamble {
        font-style: italic;
        font-size: 120%;
    }

    .paragraph {
        line-height: 1.3;
    }

    tbody>tr:nth-of-type(odd),
    #footer {
        background-color: #1f2420;
    }

    tbody>tr:hover {
        background-color: #364239;
    }

    pre {
        background-color: #282c34;
        border: 1px solid var(--repl_color-hint, #188a18);
        padding: 1em;
        color: #abb2bf;
    }

    pre.highlight {
        padding: 1px;
    }

    code {
        background-color: #282c34;
        color: #abb2bf;
    }

    /* This _should_ have been included in the Asciidoc style but it isn't */
    .underline { text-decoration:underline; }
    .overline { text-decoration:overline; }
    .line-through { text-decoration:line-through; }
    :not(pre)>code.nobreak{ word-wrap:normal; }
    :not(pre)>code.nowrap { white-space:nowrap; }
    pre.nowrap, pre.nowrap pre { 
        white-space:pre; 
        word-wrap:normal; 
    }

    /* A custom indicator that this code is in fact faulty */
    .notCompiling code {
        display: block;
        position: relative;
        /*
        .content {
            position: absolute;
        }*/

        &::before {
            content: "!";
            color: white;
            background-color: #a30e0e;
            border-radius: 50%;
            position: absolute;
            top: 1em;
            right: 1em;
            display: inline-block;
            width: 1.3em;
            height: 1.3em;
            text-align: center;
            font-weight: bolder;
            padding: 1px 1px 1px 1px;
            font-family: sans-serif;
            font-size: 1rem;
        }

        &:hover::after {
            content: "Code is faulty!";
            font-weight: bold;
            color: #a30e0e;
            position: absolute;
            right: 1em;
            bottom: 1em;
        }
    }
}