:root {
    --dark-main: #363638;
    --dark-clear: #363638CC;
    --dark-soft-clear: #36363844;
    --light-main: #FFFFFF;
    --light-tint: #e8e6e0;
    --light-clear: #FFFFFFCC;
    --light-soft-clear: #FFFFFF44;
    --cool-main: #bbaaff;
    --cool-dark: #522beb;
    --warm-main: #ffaabb;
    --warm-dark: #dd3a5b;

    color-scheme: light dark;
    --bg-color: light-dark(var(--light-main), var(--dark-main));
    --text-color: light-dark(var(--dark-main), var(--light-tint));
    --bg-color-inv: light-dark(var(--dark-main), var(--light-tint));
    --text-color-inv: light-dark(var(--light-main),var(--dark-main));
    --highlight-warm: light-dark(var(--warm-main),var(--warm-dark));
    --lowlight-warm: light-dark(var(--warm-dark),var(--warm-main));
    --highlight-cool: light-dark(var(--cool-main),var(--cool-dark));
    --lowlight-cool: light-dark(var(--cool-dark),var(--cool-main));

    --mask-bg: light-dark(var(--dark-clear),var(--light-clear));
    --mask-soft-bg: light-dark(var(--dark-soft-clear),var(--light-soft-clear));
    --mask-bg-inv: light-dark(var(--light-clear),var(--dark-clear));
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

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

nav {
    background-color: var(--bg-color-inv);

    a:visited, a:link
    {
        text-decoration: none;
        color: var(--text-color-inv);
    }

    a:hover
    {
        color: var(--highlight-cool);
    }

    a:active
    {
        color: var(--lowlight-cool);	
    }

    button {
		background-color: var(--bg-color-inv);
		color: var(--text-color-inv);
		border-color: transparent;
		font-size: 3rem;
	}

	button:hover
	{
		color: var(--highlight-cool);
        background-color: var(--bg-color-inv);
	}

}