* {
	box-sizing: border-box;
}

html {
	--lightness: 50%;
	--r: hsl(0, 100%, calc(var(--lightness) * 1.26));
	--a: hsl(30, 100%, calc(var(--lightness) * 0.96));
	--i: hsl(60, 100%, calc(var(--lightness) * 0.74));
	--n: hsl(90, 100%, calc(var(--lightness) * 0.68));
	--b: hsl(120, 100%, calc(var(--lightness) * 0.7));
	--o: hsl(180, 100%, calc(var(--lightness) * 0.66));
	--w: hsl(210, 100%, calc(var(--lightness) * 1.2));
	--s: hsl(240, 100%, calc(var(--lightness) * 1.38));
	--e: hsl(270, 100%, calc(var(--lightness) * 1.26));
	--x: hsl(300, 100%, calc(var(--lightness) * 0.86));
	--y: hsl(330, 100%, calc(var(--lightness) * 1.18));
	--q: hsl(360, 100%, calc(var(--lightness) * 1.26));

	height: 100%;
	line-height: 1.5;
}

body {
	font-family: Verdana;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 1em;
	min-height: 100%;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

h1 {
	margin-top: 0;
}

h1 i {
	font-style: normal;
}

h1 i:nth-child(1) {
	color: var(--r);
}

h1 i:nth-child(2) {
	color: var(--a);
}

h1 i:nth-child(3) {
	color: var(--i);
}

h1 i:nth-child(4) {
	color: var(--n);
}

h1 i:nth-child(5) {
	color: var(--b);
}

h1 i:nth-child(6) {
	color: var(--o);
}

h1 i:nth-child(7) {
	color: var(--w);
}

h1 i:nth-child(8) {
	color: var(--s);
}

h1 i:nth-child(9) {
	color: var(--e);
}

h1 i:nth-child(10) {
	color: var(--x);
}

h1 i:nth-child(11) {
	color: var(--y);
}

ul {
	list-style-type: none;
	padding: 0;
}

.container {
	max-width: 40rem;
	padding: 0 1em;
	margin: 0 auto;
}

.grid {
	max-width: 40em;
	position: relative;
	margin: 0;
	margin-bottom: 1em;
	transition-property: transform box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.grid:hover {
	transform: rotate(0.5deg) scale(1.02);
	box-shadow: 0 0 20px #0003;
}

.grid img {
	display: block;
}

.grid-links {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
}

.grid-links a {
	color: transparent;
	aspect-ratio: 1;
}

.content {
	padding: 2em 0;
}

.icon {
	width: 1em;
	height: 1em;
	margin-right: 0.3em;
}

.rainbow {
	display: inline-block;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(45deg, var(--r), var(--a), var(--i), var(--n), var(--b), var(--b), var(--o), var(--w), var(--s), var(--e), var(--x), var(--y), var(--q));
	background-size: 500% 500%;
	background-repeat: repeat;
	animation: rainbow 4s infinite linear;
}

.rainbow:hover,
.rainbow:active {
	animation: none;
	color: inherit;
}

@keyframes rainbow {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 500% 500%;
	}
}

.highlight {
	background-image: linear-gradient(120deg, #fccb9066 0%, #d57eeb66 100%);
	padding: 1em 1.5em;
	border-radius: 0.7em;
}

.highlight ul {
	margin: 0;
}