:root {
    --background-color: #ffedde;
    --color: #000000;
    --border-radius: 7px;
    --line-height: 2;
    --transition-duration: 0.5s;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #001221;
        --color: #dedede;
    }
}

:root {
    background-color: var(--background-color);
    color: var(--color);
    line-height: var(--line-height);
}

body {
    transition: opacity var(--transition-duration, 0.5s);
}

body.loading {
    opacity: 0;
}

a {
    transition: color var(--transition-duration, 0.5s);
}

a, a:visited {
    color: color-mix(in srgb, var(--color, #000) 50%, #00f);
}

a:hover {
    color: color-mix(in srgb, var(--color, #000) 50%, #ff0);
}

button {
    border-radius: var(--border-radius, 0px);
    border: solid 1px color-mix(in srgb, var(--color, #000) 75%, var(--background-color, #fff));
    color: color-mix(in oklab, var(--color, #000) 80%, var(--background-color, #fff));
    background-color: color-mix(in srgb, #888 40%, var(--background-color, #fff));
    cursor: pointer;
    font-size: 0.9rem;
    margin: 2px;
    padding: 0.25em;
    line-height: 1;
    vertical-align: middle;
}

button:hover {
    background-color: color-mix(in srgb, #aaa 40%, var(--background-color, #fff));
}

button:active {
    background-color: color-mix(in srgb, #ccc 40%, var(--background-color, #fff));
}

button:disabled {
    color: color-mix(in srgb, var(--color, #000) 60%, var(--background-color, #fff));
    background-color: color-mix(in srgb, var(--color, #000) 45%, var(--background-color, #fff));
    border-color: color-mix(in srgb, var(--color, #000) 55%, var(--background-color, #fff));
    cursor: default;
}

p {
    text-align: justify;
    margin: 0.5em 0px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.75em 0px 0.5em 0px;
}

h1 { font-size: calc(pow(2, 5/5) * 1em); }
h2 { font-size: calc(pow(2, 4/5) * 1em); }
h3 { font-size: calc(pow(2, 3/5) * 1em); }
h4 { font-size: calc(pow(2, 2/5) * 1em); }
h5 { font-size: calc(pow(2, 1/5) * 1em); }
h6 { font-size: calc(pow(2, 0/5) * 1em); }