:root {
    --main-bg: #1c1c1c;
    --main-fg: #404040;
    --main-text-on-bg: #fff;
    --main-text-on-fg: #fff;
    --main-a-on-bg: #b3eef5;
    --main-a-visited-on-bg: #d4b3f5;
    --main-a-on-fg: #b3eef5;
    --main-a-visited-on-fg: #d4b3f5;
    --main-shadow: #1c1c1c;
    --main-padding-horizontal: 20px;
    --main-padding-vertical: 10px;

    --main-red: #ff7961;
    --main-green: #bef67a;
    --main-yellow: #ffc947;
    --main-blue: #6ec6ff;
}

@media screen and (prefers-color-scheme: light) {
    :root {
        --main-bg: #eee;
        --main-fg: #fff;
        --main-text-on-bg: #000;
        --main-text-on-fg: #000;
        --main-a-on-bg: #40a1ad;
        --main-a-visited-on-bg: #9861cf;
        --main-a-on-fg: #40a1ad;
        --main-a-visited-on-fg: #9861cf;
        --main-shadow: #ddd;

        --main-red: #d32f2f;
        --main-green: #388e3c;
        --main-yellow: #f57c00;
        --main-blue: #004ba0;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --main-padding-horizontal: 15px;
        --main-padding-vertical: 10px;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, ui-sans-serif, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    max-width: 1000px;
    margin: auto;
    background: var(--main-bg);
    color: var(--main-text-on-bg);
}

a {
    color: var(--main-a-on-fg);
    text-decoration: none;
}

a:link {
    color: var(--main-a-on-fg);
}

a:visited {
    color: var(--main-a-visited-on-bg);
}

a:hover {
    color: var(--main-a-on-fg);
}

a:active {
    color: var(--main-a-on-fg);
}

h1 a {
    color: var(--main-text-on-bg) !important;
}

header, footer, .content-block {
    padding: var(--main-padding-vertical) var(--main-padding-horizontal);
}

article {
    background: var(--main-fg);
    color: var(--main-text-on-fg);

    padding: var(--main-padding-vertical) var(--main-padding-horizontal);
    margin-bottom: 25px;

    -moz-box-shadow: 0 0 20px 0 var(--main-shadow);
    -webkit-box-shadow: 0 0 20px 0 var(--main-shadow);
    box-shadow: 0 0 30px 0 var(--main-shadow);
}

nav ul {
    padding-left: 0;
}

nav ul li {
    padding: 0.3em;
    display: inline;
}

nav h1 {
    margin-bottom: 0.2em;
}

nav small {
    font-size: medium;
}

nav h1 a {
    color: inherit;
    text-decoration: none;
}

nav ul a {
    text-decoration: none;
}

footer {
    text-align: center;
}

footer a {
    color: var(--main-a-on-fg);
}

footer ul {
    padding-left: 0;
}

footer ul li {
    padding: 0.3em;
    display: inline-block;
}

.highlight {
    margin-bottom: 10px;
}

.highlight pre {
    padding: 0.5em;
}

.text-red {
    color: var(--main-red);
}

.text-green {
    color: var(--main-green);
}

.text-yellow {
    color: var(--main-yellow);
}

.text-blue {
    color: var(--main-blue);
}