* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: linear-gradient(45deg, #B4891E, #a39665, #ffffff);
	background-size: 300%;
	background-position: center;

	animation: sky 5s ease-in-out infinite;

	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;
	gap: 1em;
	place-items: center;
	place-content: center;
}
h3 {
	
	color: rgba(50, 50, 50, 0.95);
	font-weight: 300;
	font-size: 4em;
}

.container {
	display: grid;
	grid: 1fr / 1fr;
	width: clamp(100px, 50vw, 10em);
	aspect-ratio: 1;
}
.wheel {
	grid-column: 1;
	grid-row: 1;

	background-image: url(https://raw.githubusercontent.com/akaLaws/doodles/c08f1865c1b56cc896a2d1eae480574467512187/wheelnew.svg);

	background-repeat: no-repeat;
	filter: invert(15%);

	opacity: 0.9;

	width: 100%;
	height: 100%;

	animation: spin 5s linear infinite;
}
.wheel:nth-of-type(2) {
	opacity: 0.7;
	animation: spin-reverse 5s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(0deg);
	}
	from {
		transform: rotate(1turn);
	}
}
@keyframes spin-reverse {
	to {
		transform: rotate(0deg) scaleX(-1);
	}
	from {
		transform: rotate(-1turn) scaleX(-1);
	}
}

@keyframes sky {
	0%,
	100% {
		background-position: center;
	}
	25% {
		background-position: left;
	}
	70% {
		background-position: bottom;
	}
	90% {
		background-position: right;
	}
}