main {
	margin-inline: auto;

	h2 {
		text-align: center;
		margin-block-start: 3rem;
		margin-block-end: 1rem;
	}
}

header {
	padding-block: 9rem;
	padding-inline: 3.5rem;
	margin-block-start: -3rem;
	margin-block-end: 3rem;
	margin-inline: -3rem;
	text-align: center;
	background-image:
		radial-gradient(at 57% 41%, var(--magenta) 0px, transparent 50%), radial-gradient(at 42% 52%, var(--green) 0px, transparent 50%), radial-gradient(at 59% 58%, var(--yellow) 0px, transparent 50%);
	background-size:
		90% 90%,
		80% 80%,
		100% 100%;
	background-repeat: no-repeat;
	animation: gradientShift 60s ease-in-out infinite;

	h1 {
		margin-block-end: 0.5rem;
	}
}

@keyframes gradientShift {
	0% {
		background-position:
			85% 25%,
			15% 75%,
			70% 90%;
	}
	25% {
		background-position:
			20% 80%,
			75% 20%,
			10% 65%;
	}
	50% {
		background-position:
			95% 40%,
			25% 95%,
			80% 30%;
	}
	75% {
		background-position:
			5% 15%,
			90% 85%,
			45% 10%;
	}
	100% {
		background-position:
			5% 15%,
			90% 85%,
			45% 10%;
	}
}

ul {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 0;

	li {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin: 0;
		background: light-dark(var(--white), var(--dark_grey));
		padding: 1rem;
		position: relative;

		a {
			font-weight: bold;
		}

		a:focus-within {
			outline: none;
		}

		a:focus-within::before {
			outline: 2px solid var(--blue);
			outline-offset: 0.25rem;
		}

		a::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
		}
	}
}