body {
	margin: 0;
}

.bg {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100dvh;
	width: 100%;
	background-color: #316093;
}

.spin-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	width: 100%;
	padding: 4rem;
}

.spin-btn {
	padding: 10px 24px;
	border-radius: 12px;
	background-color: #75a12e;
	text-transform: uppercase;
	color: #eee;
	border: none;
	font-weight: 700;
}

.wheel-container {
	position: relative;
	height: 100%;
	width: 100%;
	max-width: 40rem;
}

.wheel {
	position: relative;
	z-index: 10;
	pointer-events: none;
	transform-origin: 50% 53%;
	display: block;
	filter: none;
	transition: filter 0.5s ease-in-out;
}

.wheel.blur {
	filter: blur(1px);
}

.pin {
	position: absolute;
	top: 3%;
	left: 47%;
	width: 7%;
	z-index: 40;
}

.logo {
	position: absolute;
	width: 33%;
	top: 37%;
	left: 33%;
	z-index: 40;
}

.pin-ticking {
	animation: pinTick 0.3s 9 ease-out;
}

@keyframes pinTick {
	0% {
		transform: rotate(0deg);
	}
	80% {
		transform: rotate(-40deg);
	}
	90% {
		transform: rotate(-25deg);
	}
	95% {
		transform: rotate(8deg);
	}
	100% {
		transform: rotate(0deg);
	}
}