/*
**	index.css
*/

@import "./user-interface.css";
@import "./screensaver-output.css";
@import "./animation.css";


:root {
	--project-colour: midnightblue;
	--transition-time-page: 1s;
	--transition-time-ui: 0.5s;
}



html {
	margin:0px;
	padding:0px;

	scrollbar-width: none;

	font-family: sans-serif;
	font-size: 14px;

	body {

		margin:0px;
		padding:0px;

		a {
			color: var(--accent-colour);
			text-decoration: none;
			&:hover { text-decoration: underline; }
		}

		output > svg {
			display:block;	/*  fix for the extra pixel problem */
		}
	}




}/* html */



html {

	--scheme-colour: #0a0a0a;
	--html-background: var(--scheme-colour);
	--accent-colour: hsl(from var(--project-colour) h s 85 );

	background-color: var(--html-background);
	color-scheme: dark;
	accent-color: var(--accent-colour);

	transition:
		background-color var(--transition-time-page) linear,
		color-scheme var(--transition-time-page) linear allow-discrete;


	body {
		color: lab( from var(--scheme-colour) calc(sign(l - 70) * -100) 0 0 / 1);
		accent-color: var(--accent-colour);

		transition:
			color var(--transition-time-page) linear,
			accent-color var(--transition-time-page) linear;
	}
}



html[data-colourscheme=light] {
	color-scheme: light;
	--scheme-colour: white;
	--accent-colour: hsl(from var(--project-colour) h 50 50 );
}

html[data-colourscheme=dark] {
	color-scheme: dark;
	--scheme-colour: #0a0a0a;
	--accent-colour: hsl(from var(--project-colour) h s 85 );
}