body {
	height: 100vh;
	background: #fbf223;
}

/* Ensures canvas and image are aligned horizontally */
#wheel {
	width: 100px; /* Adjust the size as needed */
	height: 100px;
}

#arrow {
	width: 50px; /* Adjust the size as needed */
	height: 50px;
}

.mydiv {
	padding: 20px; /* Adjust as needed for spacing */
}

/* Make sure the wrapper is responsive */
.wrapper {
	max-width: 100%; /* Ensures it doesn't exceed the container */
}

#tigerContainer{
	margin-left: -5%;
}





#secondPage{
	display: none;
}


.lottery{
	width: 15%;
}


.slide-in-fwd-center{animation:slide-in-fwd-center .4s cubic-bezier(.25,.46,.45,.94) 0s both}
@keyframes slide-in-fwd-center{0%{transform:translateZ(-1400px);opacity:0}100%{transform:translateZ(0);opacity:1}}

.fade-out{-webkit-animation:fade-out 1s ease-out both;animation:fade-out 1s ease-out both}
@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}


.heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}
@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}


/*for confetti */

.confetti-container {
	position: absolute;
	left: 0;
	width: 96%;
	height: 50%;
	pointer-events: none; /* Prevent interaction with confetti */
}

.confetti {
	position: absolute;
	width: 50px;
	height: 10px;
	background-color: #FFC107;
	opacity: 0.7;
	border-radius: 50%;
	animation: confetti-burst 4s ease-out forwards;
}

@keyframes confetti-burst {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(var(--x), var(--y)) scale(0.5);
		opacity: 0;
	}
}
}