/* @media (prefers-color-scheme: dark) { */
    :root {
        --bg: #1a2332;
        --bg-hard: black;
        --fg: #d4dce6;
        --fg-soft: #d4dce61a;
        --border: #465f70;
    }

    a:link {
        color: #93e78b;
    }
    a:visited {
        color: #8ba8e7;
    }
/* } */

/* @media (prefers-color-scheme: light) {
    :root {
        --bg: #d4dce6;
        --bg-hard: #ecf0f1;
        --fg: #1a2332;
        --fg-soft: #c5c7cb;
        --border: #9abfd8;
    }

    a:link {
        color: #6ba865;
    }
    a:visited {
        color: #5b6d96;
    }
} */
html {
    background-color: var(--bg);
    background-image:  linear-gradient(var(--fg-soft) 1px, transparent 1px), linear-gradient(to right, var(--fg-soft) 1px, var(--bg) 1px);
    background-size: 20px 20px;
}

html, body {
    font-family: monospace;
    color: var(--fg);
}

h1 {
    margin: 0;
    padding: 0;
}

.paragraph {

    pre {
        font-size: 12px;
    }
    max-width: 60rem;
    width: calc(100% - 10px);
    margin: 2rem auto 0 auto;
    box-sizing: border-box;

    padding: 10px;
    border: 6px ridge var(--border);

    background-color: var(--bg-hard);

    p {
        font-size: 16px;
        line-height: 2rem;
        text-indent: 2rem;

    }
    .code-block {
        padding-left: 1rem;
        margin-left: 1rem;
        border-left: 1px dashed var(--fg);
        max-width: calc(100% - 2rem);
        overflow-x: hidden;
    }

}