:root {
	--g1: rgb(98, 0, 234);
	--g2: rgb(236, 64, 122);
}

@keyframes background-pan {
	from {
		background-position: 0% center;
	}
	to {
		background-position: -200% center;
	}
}

body {
	height: 100vh;
	width: 100vw;
	background: linear-gradient(to right, var(--g1), var(--g2), var(--g1));
	animation: background-pan 10s linear infinite;
	background-size: 200%;
	overflow: hidden;
	margin: 0;
}

#tiles {
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-rows: repeat(var(--rows), 1fr);
	grid-template-columns: repeat(var(--columns), 1fr);
}

.tile {
	position: relative;
	transition: 500ms opacity ease;
}

.tile::before {
	background-color: rgb(20, 20, 20);
	content: '';
	position: absolute;
	inset: 0.5px;
}