:root {
	--huehour: 360/24;
	--msec: 100/60;
	
}
body {
	height: 100vh;
	margin: 0;
	transition: 1s linear;
	overflow: hidden;
}
body > div {
	position: absolute;
	top: 0;
	width: 100vw;
	transition: 10s calc(var(--h) * .1s);
	display: grid;
	grid-template-columns: repeat(6,1fr);
	height: 100vh;
	z-index: calc(25 - var(--h));
}
body > div:nth-of-type(1) { --h: 0;}
body > div:nth-of-type(2) { --h: 1;}
body > div:nth-of-type(3) { --h: 2;}
body > div:nth-of-type(4) { --h: 3;}
body > div:nth-of-type(5) { --h: 4;}
body > div:nth-of-type(6) { --h: 5;}
body > div:nth-of-type(7) { --h: 6;}
body > div:nth-of-type(8) { --h: 7;}
body > div:nth-of-type(9) { --h: 8;}
body > div:nth-of-type(10) { --h: 9;}
body > div:nth-of-type(11) { --h: 10;}
body > div:nth-of-type(12) { --h: 11;}
body > div:nth-of-type(13) { --h: 12;}
body > div:nth-of-type(14) { --h: 13;}
body > div:nth-of-type(15) { --h: 14;}
body > div:nth-of-type(16) { --h: 15;}
body > div:nth-of-type(17) { --h: 16;}
body > div:nth-of-type(18) { --h: 17;}
body > div:nth-of-type(19) { --h: 18;}
body > div:nth-of-type(20) { --h: 19;}
body > div:nth-of-type(21) { --h: 20;}
body > div:nth-of-type(22) { --h: 21;}
body > div:nth-of-type(23) { --h: 22;}
body > div:nth-of-type(24) { --h: 23;}
body > div:nth-of-type(25) { --h: 0; z-index: 0}
.was {
	translate: 0 100vh;
}
.is {
	translate: 0 calc(var(--msec) * var(--m) * 1vh);
}
.tobe {
	translate: 0 0;
}
div div {
	transition: 1s linear;
	background: hsl(calc(var(--huehour) * var(--hue)),calc(var(--msec) * var(--sat) * 1%),calc(var(--msec) * var(--lig) * 1%));
	--hue: var(--s);
	--sat: var(--h);
	--lig: var(--m);
}
/* div:nth-of-type(2n) div {
	background: hsl(
		calc(180 - var(--huehour) * var(--hue)),
		calc(var(--msec) * var(--sat) * 1%),
		calc(var(--msec) * var(--lig) * 1%)
	);
} */
div div:nth-of-type(2) {
	--hue: var(--s);
	--sat: var(--m);
	--lig: var(--h);
}
div div:nth-of-type(3) {
	--hue: var(--m);
	--sat: var(--h);
	--lig: var(--s);
}
div div:nth-of-type(4) {
	--hue: var(--m);
	--sat: var(--s);
	--lig: var(--h);
}
div div:nth-of-type(5) {
	--hue: var(--h);
	--sat: var(--m);
	--lig: var(--s);
}
div div:nth-of-type(6) {
	--hue: var(--h);
	--sat: var(--s);
	--lig: var(--m);
}