#loading {
	--loading-text-duration: 3s;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	z-index: 100;
}

#loading img {
	animation: shake 4s ease-in-out infinite, rotateCow 4s linear infinite;
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	50% {
		transform: translateX(5px);
	}
	75% {
		transform: translateX(-5px);
	}
}

@keyframes rotateCow {
	0% {
		transform: rotate(0deg);
	}
	33% {
		transform: rotate(120deg);
	}
	66% {
		transform: rotate(240deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#loading .loading-text {
	font-size: 2rem;
	display: flex;
	gap: 0.1em;
}

#loading .loading-text span {
	display: inline-block;
}

@keyframes bounceUp1 {
	0% {
		transform: translateY(0);
	}
	5% {
		transform: translateY(-10px);
	}
	10% {
		transform: translateY(0);
	}
}

@keyframes bounceUp2 {
	10% {
		transform: translateY(0);
	}
	15% {
		transform: translateY(-10px);
	}
	20% {
		transform: translateY(0);
	}
}

@keyframes bounceUp3 {
	20% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-10px);
	}
	30% {
		transform: translateY(0);
	}
}

@keyframes bounceUp4 {
	30% {
		transform: translateY(0);
	}
	35% {
		transform: translateY(-10px);
	}
	40% {
		transform: translateY(0);
	}
}

@keyframes bounceUp5 {
	40% {
		transform: translateY(0);
	}
	45% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0);
	}
}

@keyframes bounceUp6 {
	50% {
		transform: translateY(0);
	}
	55% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(0);
	}
}

@keyframes bounceUp7 {
	60% {
		transform: translateY(0);
	}
	65% {
		transform: translateY(-10px);
	}
	70% {
		transform: translateY(0);
	}
}

@keyframes bounceUp8 {
	70% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-10px);
	}
	80% {
		transform: translateY(0);
	}
}

@keyframes bounceUp9 {
	80% {
		transform: translateY(0);
	}
	85% {
		transform: translateY(-10px);
	}
	90% {
		transform: translateY(0);
	}
}

@keyframes bounceUp10 {
	90% {
		transform: translateY(0);
	}
	95% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}

#loading .loading-text span:nth-child(1) {
	animation: bounceUp1 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(2) {
	animation: bounceUp2 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(3) {
	animation: bounceUp3 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(4) {
	animation: bounceUp4 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(5) {
	animation: bounceUp5 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(6) {
	animation: bounceUp6 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(7) {
	animation: bounceUp7 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(8) {
	animation: bounceUp8 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(9) {
	animation: bounceUp9 var(--loading-text-duration) infinite;
}

#loading .loading-text span:nth-child(10) {
	animation: bounceUp10 var(--loading-text-duration) infinite;
}

.disappear {
	animation: disappear 0.5s ease-in-out forwards;
}

@keyframes disappear {
	0% {
		scale: 1;
		opacity: 1;
	}
	100% {
		scale: 2;
		opacity: 0;
	}
}