:root {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    color-scheme: light dark;

    --bg-color: light-dark(rgb(255, 255, 255), rgb(0, 0, 0));
    --bg-mixer: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));

    --text-color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));

    --header-bg-color: var(--bg-color);
    --main-bg-color: color-mix(in srgb, var(--bg-color), var(--bg-mixer) 3%);

    --heading-color: var(--text-color);
}

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

header {
    background-color: var(--header-bg-color);
    margin: 0.25em 0.25em 0 0.25em;
    text-align: end;
}

main {
    background-color: var(--main-bg-color);
    padding: 0.25em 0.5em;
}

h1 {
    color: var(--heading-color);
}