body {
	margin: 0;
	padding: 0;
	height: 100vh;
	height: 100dvh;
	font-family: georgia, serif;
}
ol {
	display: grid;
	height: 100vh;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 1px;
}
li {
	display: grid;
	background: darkred;
	color: white;
	text-align: center;
	align-items: center;
}
li a {
	height: 100%;
	display: grid;
	align-items: center;
	background: hsl(0 50% 50%);
	color: black;
	text-decoration: none;
	transition: opacity .3s;
	animation-delay: .1s;
	animation-duration: .2s;
	animation-fill-mode: forwards;
}
li a:hover {
	opacity: .6;
}

li:nth-last-of-type(2n) a {
	background: hsl(30 50% 50%);
	animation-delay: .2s;
	animation-duration: .3s;
}
li:nth-last-of-type(3n) a {
	background: hsl(60 50% 50%);
	animation-delay: .1s;
	animation-duration: .3s;
}
li:nth-last-of-type(5n) a {
	background: hsl(90 50% 50%);
	animation-delay: .3s;
	animation-duration: .2s;
}
li:nth-last-of-type(7n) a {
	background: hsl(120 50% 50%);
	animation-delay: .3s;
	animation-duration: .1s;
}
li:nth-last-of-type(11n) a {
	background: hsl(150 50% 50%);
	animation-delay: .2s;
	animation-duration: .1s;
}
li:nth-last-of-type(13n) a {
	background: hsl(180 50% 50%);
	animation-delay: .3s;
	animation-duration: .3s;
}
li:nth-last-of-type(17n) a,
li:nth-last-of-type(20n) a {
	background: hsl(210 50% 50%);
}
li:nth-last-of-type(19n) a,
li:nth-last-of-type(30n) a {
	background: hsl(240 50% 50%);
}
li:nth-last-of-type(23n) a {
	background: hsl(270 50% 50%);
}
li:nth-last-of-type(27n) a,
li:nth-last-of-type(50n) a {
	background: hsl(300 50% 50%);
}

a.visited {
	animation-name: --rotate;
}

@keyframes --rotate {
	100% {
		transform: rotate(180deg);
	}
}