@layer colorscheme {
    html {
        --background: var(--flexoki-paper);
        --main-text: var(--flexoki-black);
        --links: var(--flexoki-yellow-600);
        --heading1-color: var(--flexoki-green-600);
        --focus-color: var(--flexoki-orange-100);
    }



    @media (prefers-color-scheme: dark) {
        html {
            --background: var(--flexoki-black);
            --main-text: var(--flexoki-paper);
			--links: var(--flexoki-yellow-600);
			--heading1-color: var(--flexoki-green-600);
            --focus-color: var(--flexoki-orange-900);
        }
    }

    a:not([class]) {
        color: var(--links);
        font-weight: 600;
    }

    a:focus {
        outline: solid 2px var(--focus-color);
    }

    a:hover {
        background-color: var(--focus-color);
        color: var(--main-text);
    }

    a:active {
        background-color: var(--focus-color);
    }

    a {
        cursor: pointer;
        color: var(--links);
    }
}