:root {
	/*  LIGHTEST  */
	--Z: #ffffff;
	--Y: #c4c4c4;
	--X: #b0b2b5;

	--D: #222429; /* MID */
	--C: #161214;
	--B: #111215;
	--A: #0A0A0A;
	/*  DARKEST  */
	}


:root {
	--color: VAR(--X);
	--bg-color: VAR(--D);

	--go-fg-color: VAR(--B);
	--go-bg-color: hsla(108, 100%, 66%, 0.94);
	}

@media (prefers-color-scheme: dark) {

	:root {
		}
	}



* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}


body {
	display: grid;

	grid-template-rows: auto 1fr auto;

	font: normal 16px arial;

	height: 100dvh; /* or? */

	color: var(--color);
	background-color: var(--bg-color);
	}

svg {
	width: 24px;
	}

main {
	}



header {
	position: sticky;
	top:0;
	}


footer {
	position: sticky;
	bottom:0;
	}

/*
html.busy .hide-when-busy {display: none !important;}
html:not(.busy) .hide-when-not-busy {display: none !important;}
*/