body {
    margin: 40px auto;
    padding: 0 10px;
    max-width: 50em;
    font-family: sans-serif;

    color: #444;
    background-color: #eee;
    background-image: radial-gradient(circle at center, #ccc 0%, #ccc 6%, transparent 7%);
    background-size: 15px 15px;
}

p {
    line-height: 1.6;
}

pre {
    background-color: #ddd;

    border-color: #444;
    padding: .75em;
    border-width: thin;
    border-style: solid;
    border-radius: .5em;

    overflow-x: auto;
    white-space: pre;
}

p code {
    background-color: #ddd;

    border-color: #444;
    padding: 0 .2em;
    border-width: thin;
    border-style: solid;
    border-radius: 2px;

    white-space: nowrap;
    word-break: normal;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background-color: #444;
        background-image: radial-gradient(circle at center, #555 0%, #555 6%, transparent 7%);
    }

    pre {
        background-color: #333;
        border-color: #eee;
    }

    p code {
        background-color: #333;
        border-color: #eee;
    }

    a {
        color: #8ab4f8;
    }

    a:visited {
        color: #C58AF9;
    }
}