:root {
	--deg: 45;
}

title {
	fon
}

*,
*::after,
*::before {
	text-align: left;
	display: grid;
	margin: 0;
	content: '1 divtober 2022';
	font-size: 16vw;
	white-space: nowrap;
	line-height: .8;
	animation-name: hue;
	animation-iteration-count: infinite; 
	height: calc(100vh / 17);
	animation-duration: 29s;
}
*::after {
	animation-name: fnot;
	animation-iteration-count: infinite; 
	animation-duration: 29s;
}
*::before {
	animation-name: fnot;
	animation-iteration-count: infinite; 
	animation-duration: 59s;
	animation-direction: reverse;
}

html {
	background: hsla(calc(var(--deg) * 1), 100%, 50%,.5);
	height: 100vh;
	grid-template-rows: repeat(4, auto);
	animation-duration: 29s;
}
html::before {
	animation-duration: 29s;
	animation-delay: -1337s;
}
html::after {
	animation-duration: 59s;
	animation-delay: -1337s;
}
head {
	background: hsla(calc(var(--deg) * 3), 100%, 50%,.5);
	animation-duration: 37s;
	height: calc(100vh / 17 * 10);
}
head::after {
	animation-duration: 47s;
	animation-delay: -1337s;
}
head::before {
	animation-duration: 43s;
	animation-delay: -1337s;
}
meta {
	background: hsla(calc(var(--deg) * 5), 100%, 50%,.5);
	animation-duration: 43s;
}
meta::after {
	animation-duration: 41s;
	animation-delay: -1337s;
}
meta::before {
	animation-duration: 37s;
	animation-delay: -1337s;
}
meta:nth-of-type(2) {
	background: hsla(calc(var(--deg) * 7), 100%, 50%,.5);
	animation-duration: 53s;
}
meta:nth-of-type(2)::after {
	animation-duration: 31s;
	animation-delay: -1337s;
}
meta:nth-of-type(2)::before {
	animation-duration: 29s;
	animation-delay: -1337s;
}
title {
	background: hsla(calc(var(--deg) * 8), 100%, 50%,.5);
	animation-name: hue, fnot;
	animation-iteration-count: infinite, infinite; 
	animation-duration: 59s, 47s;
}
title::after {
	animation-duration: 59s;
	animation-delay: -1337s;
}
title::before {
	animation-duration: 47s;
	animation-delay: -1337s;
}
link {
	background: hsla(calc(var(--deg) * 6), 100%, 50%,.5);
	animation-duration: 47s;
}
link::after {
	animation-duration: 43s;
	animation-delay: -1337s;
}
link::before {
	animation-duration: 47s;
	animation-delay: -1337s;
}
body {
	background: hsla(calc(var(--deg) * 4), 100%, 50%,.5);
	animation-duration: 41s;
	height: calc(100vh / 17 * 5);
}
body::after {
	animation-duration: 41s;
	animation-delay: -1337s;
}
body::before {
	animation-duration: 29s;
	animation-delay: -1337s;
}
div {
	background: hsla(calc(var(--deg) * 2), 100%, 50%,.5);
	animation-duration: 31s;
}
div::after {
	animation-duration: 47s;
	animation-delay: -1337s;
}
div::before {
	animation-duration: 59s;
	animation-delay: -1337s;
}


@keyframes hue {
	100% {
		filter: hue-rotate(1turn);
	}
}
@keyframes fnot {
	0%,8.29% {
		font-family: 'Courier New', Courier, monospace;
		font-size: 11.1vw;
	}
	8.3%,16.59% {
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-size: 17.6vw;
	}
	16.6%,24.9% {
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		font-size: 15.3vw;
	}
	25%, 33.29% {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-size: 12.8vw;
		
	}
	33.3%, 41.5% {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size: 14.2vw;
	}
	41.6%, 49.9% {
		font-family: 'Times New Roman', Times, serif;
		font-size: 15.8vw;
		
	}
	50%, 58.2% {
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		font-size: 14.3vw;
	}
	58.3%, 66.5% {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14.4vw;
		
	}
	66.6%, 74.9% {
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
		font-size: 15.4vw;
	}
	75%, 83.2% {
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-size: 14.4vw;
		
	}
	83.3%, 91.5% {
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
		font-size: 16vw;
	}
	91.6%, 99.9% {
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 12.4vw;
		
	}
}