@mixin theming($background, $foreground) {
    $link: #0000FF;
    $link_visited: mix($link, $foreground, $weight: 50%);
    $link_notvisited: mix($link, $foreground, $weight: 75%);
    --background: #{$background};
    --text: #{$foreground};

    a:visited {
        color: $link_visited;
    }

    a:link {
        color: $link_notvisited;
    }

    span {
        &.warning {
            transition-property: background-color;
            transition-duration: 1s;
            transition-timing-function: linear;
            &:hover {
                background-color: mix(#FFFF00, $background, 50%);
                transition-property: background-color;
                transition-duration: 1s;
                transition-timing-function: linear;
            }
        }
    }
}

@mixin theme($schema, $background, $foreground) {

    body.#{$schema} {
        @include theming($background, $foreground);
    }

    @media (prefers-color-scheme: $schema) {
        body {
            @include theming($background, $foreground);
        }
    }
}



@include theme("dark", #333333, #ffffff);
@include theme("black", #000000, #ffffff);
@include theme("light", #ffffff, #000000);

@media (not ((prefers-color-scheme: light) or (prefers-color-scheme: dark) or (prefers-color-scheme: black))) {
    body {
        @include theming(#000001, #ffffff);
    }
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: var(--background);
    color: var(--text);

    >header,
    >footer {
        width: 100vw;
    }

    >main {
        flex: 1 1 auto;
        flex-direction: column;
    }

    >.menu {
        flex-direction: row;
        margin: 2em 0;
        padding: 0;
        justify-content: center;
        align-items: center;

        >li {
            list-style: none;
            flex-wrap: wrap;
            padding: 0.5em;
            border: 0.1em;
            border-color: black;
            border-style: solid;
        }
    }

    >.menu,
    >main {
        max-width: 90vw;
        display: flex;

        >* {
            margin: 0;
            margin-bottom: 2em;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-left: auto;
            margin-right: auto;
        }
    }

    >header,
    >footer,
    >.menu {
        flex: 0 min-content;
    }

    >div.colorscheme {
        display: none;
    }

    &.interactive>div.colorscheme {
        display: flex;
        flex-direction: column;
    }
}

.colorscheme {
    position: fixed;
    top: 0;
    right: 0;

    >input[type=radio] {
        display: none;

        &:checked+label {
            background-color: red;
        }

        &+label {
            background-color: green;
        }
    }

    .icon,
    label {
        display: block;
        height: 3em;
        width: 3em;
    }
}

.icon {
    height: 1em;
    width: 1em;
    stroke-width: 5;
    stroke-linecap: round;
}

form {
    display: grid;
    grid-template-columns: min-content auto;
    column-gap: 1em;
    row-gap: 0.5em;

    input[type="submit"] {
        grid-column: 1 / 3;
    }
}

span {
    &.euphemsimus {
        font-style: italic;

        &::before {
            content: open-quote;
        }

        &::after {
            content: close-quote;
        }
    }
}