:root {
    --color-red: #cc241d;
    --color-orange: #d65d0e;
    --color-yellow: #d79921;
    --color-green: #98971a;
    --color-aqua: #689d6a;
    --color-blue: #458588;
    --color-purple: #b16286;

    --color-fg-light: #2c2836;
    --color-bg-light: #fbf1c7;

    --color-fg-dark: #ebdbb2;
    --color-bg-dark: #282828;

    --color-fg: var(--color-fg-light);
    --color-bg: var(--color-bg-light);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fg: var(--color-fg-dark);
        --color-bg: var(--color-bg-dark);
    }
}

body {
    color: var(--color-fg);
    background-color: var(--color-bg);
}

a {
    color: var(--color-aqua);
}

a:active {
    color: var(--color-green);
}

main {
    max-width: 1000px;
    margin: 1em auto;
    border: 1px solid var(--color-fg);
	padding: 1em 2em;
}

footer {
    text-align: center;
}