#loader {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--BODY-BGCOLOR);
	overflow: hidden;
	z-index: 5;
	display: none;
}

#basket {
	position: relative;
	top: 45vh;
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	z-index: 2;
}

#bird1,
#bird2 {
	position: absolute;
	width: 250px;
	transform-origin: center;
	animation: swoop 3s ease-in-out infinite, opacitySwap 3s linear infinite;
	z-index: 1;
}

#bird2 {
	animation-name: swoop, opacitySwapReverse;
}

@keyframes swoop {
	0% {
		left: 100%;
		top: 20px;
		transform: rotate(-40deg);
	}
	50% {
		left: 38%;
		top: 45vh;
		transform: rotate(0deg);
	}
	100% {
		left: -30%;
		top: 5px;
		transform: rotate(40deg);
	}
}

@keyframes opacitySwap {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

@keyframes opacitySwapReverse {
	0%,
	49% {
		opacity: 0;
	}
	50%,
	100% {
		opacity: 1;
	}
}

.loading-text {
	position: absolute;
	top: 35vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: min(3rem, 8vw);
	font-family: "Nimbu", "Times New Roman", Times, serif;
	letter-spacing: -0.1rem;
	color: var(--BODY-COLOR);
	text-transform: uppercase;
	z-index: 3;
	display: flex;
	padding: 1rem;
}

.loading-text .dot {
	padding: 0 0.3rem;
	animation: dotFlash 1.5s infinite;
	opacity: 0;
}
.loading-text .dot:nth-child(1) {
	animation-delay: 0s;
}
.loading-text .dot:nth-child(2) {
	animation-delay: 0.2s;
}
.loading-text .dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes dotFlash {
	0%,
	20% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media screen and (max-width: 750px) {
	#bird1,
	#bird2,
	#basket {
		width: 200px;
	}
	@keyframes swoop {
		0% {
			left: 100%;
			top: 20px;
			transform: rotate(-40deg);
		}
		50% {
			left: 25%;
			top: 45vh;
			transform: rotate(0deg);
		}
		100% {
			left: -60%;
			top: 20px;
			transform: rotate(40deg);
		}
	}
}