:root {
    --background: linear-gradient(0deg, #fff 98%, #d3d3d3);
    --foreground: #000;

    --header-foreground: #000000;
    --header-shadow: 2px 2px 0px #b8b5c2;

    --box-background: #eee;
    --box-foreground: #505050;
    --box-border: 1px solid #505050;

    --width: 50%;
    --pad: 8px;
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    color: var(--header-foreground);
    text-shadow: var(--header-shadow);
    font-size: 64px;
    font-family: 'Times New Roman', Times, serif;
}

h3 {
    color: var(--header-foreground);
    text-shadow: var(--header-shadow);
    border-bottom: var(--box-border);
}

body {
    background: var(--background);
    color: var(--foreground);

    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header,
main,
footer {
    width: var(--width);
    margin: 0 auto;
    padding: var(--pad) 0;
}

code {
    background: var(--box-background);
    color: var(--box-foreground);
    border: var(--box-border);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 0 4px;
}

p,
li {
    margin: calc(var(--pad) / 2) 0;
    font-size: 18px;
}

ul li,
ol li {
    margin-left: 32px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #161618;
        --foreground: #ffffff;

        --header-foreground: #afb5ff;
        --header-shadow: 2px 2px 0px #353644;

        --box-background: #2c2c35;
        --box-foreground: #c8ccff;
        --box-border: 1px solid #2f303f;

        --width: 50%;
        --pad: 8px;
    }
}