.bats {
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 45%;
	z-index: -5;
}

.bat {
	top: 50%;
	left: 110%;
	transform: translate(-7%);
	width: 1em;
	height: 1.2em;
	animation: 4s infinite alternate ease-in-out;
	font-size: 6px;
	opacity: 0;
}

	.bat, .bat *, .bat :before, .bat :after {
		position: absolute;
	}

.bat__head {
	background: #333;
	width: 100%;
	height: 100%;
	border-radius: 2em;
}

.bat__eye {
	background: radial-gradient(#fc0 15%, #c80 40%);
	width: 0.2em;
	height: 0.2em;
	border-radius: 1em;
	left: 18%;
	bottom: 50%;
}

	.bat__eye + .bat__eye {
		left: auto;
		right: 18%;
	}

.bat__wing {
	width: 4em;
	height: 1.6em;
	right: 50%;
	bottom: 20%;
	background: #333;
	clip-path: polygon(65% 59%, 39% 53%, 33% 33%, 10% 22%, 0 0, 70% 0, 100% 65%, 100% 100%);
	z-index: -1;
	transform-origin: 100%;
	animation: wing 0.1s infinite alternate ease-in-out;
}

	.bat__wing + .bat__wing {
		left: 50%;
		right: auto;
		clip-path: polygon(0% 100%, 0 65%, 30% 0, 100% 0%, 91% 22%, 66% 33%, 61% 53%, 35% 59%);
		animation: wing 0.1s 0.1s infinite alternate ease-in-out;
		transform-origin: 0;
	}

@keyframes wing {
	0% {
		transform: rotate(20deg);
	}

	100% {
		transform: rotate(-30deg);
	}
}

.bat:nth-child(1) {
	animation-name: fly-1;
	animation-duration: 6s;
	animation-delay: 0s;
}

@keyframes fly-1 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-2vw, 3vh);
	}

	40% {
		transform: translate(-5vw, 4vh);
	}

	60% {
		transform: translate(7vw, 8vh);
	}

	80% {
		transform: translate(7vw, 1vh);
	}

	100% {
		transform: translate(-3vw, 0);
		top: 49vh;
		opacity: 1;
	}
}

.bat:nth-child(2) {
	animation-name: fly-2;
	animation-duration: 6s;
	animation-delay: 0.5s;
}

@keyframes fly-2 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-3vw, 5vh);
	}

	40% {
		transform: translate(2vw, -8vh);
	}

	60% {
		transform: translate(-5vw, -3vh);
	}

	80% {
		transform: translate(-7vw, -7vh);
	}

	100% {
		transform: translate(-9vw, 0);
		top: 55vh;
		opacity: 1;
	}
}

.bat:nth-child(3) {
	animation-name: fly-3;
	animation-duration: 10s;
	animation-delay: 1s;
}

@keyframes fly-3 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-7vw, 0vh);
	}

	40% {
		transform: translate(10vw, -2vh);
	}

	60% {
		transform: translate(6vw, 4vh);
	}

	80% {
		transform: translate(-8vw, 1vh);
	}

	100% {
		transform: translate(-3vw, 0);
		top: 47vh;
		opacity: 1;
	}
}

.bat:nth-child(4) {
	animation-name: fly-4;
	animation-duration: 7s;
	animation-delay: 1.5s;
}

@keyframes fly-4 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-7vw, -5vh);
	}

	40% {
		transform: translate(7vw, -7vh);
	}

	60% {
		transform: translate(8vw, -5vh);
	}

	80% {
		transform: translate(2vw, -7vh);
	}

	100% {
		transform: translate(1vw, 0);
		top: 25vh;
		opacity: 1;
	}
}

.bat:nth-child(5) {
	animation-name: fly-5;
	animation-duration: 10s;
	animation-delay: 2s;
}

@keyframes fly-5 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(2vw, 0vh);
	}

	40% {
		transform: translate(4vw, 8vh);
	}

	60% {
		transform: translate(-8vw, -2vh);
	}

	80% {
		transform: translate(-7vw, -7vh);
	}

	100% {
		transform: translate(-7vw, 0);
		top: 16vh;
		opacity: 1;
	}
}

.bat:nth-child(6) {
	animation-name: fly-6;
	animation-duration: 8s;
	animation-delay: 2.5s;
}

@keyframes fly-6 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-4vw, -5vh);
	}

	40% {
		transform: translate(8vw, 10vh);
	}

	60% {
		transform: translate(1vw, 4vh);
	}

	80% {
		transform: translate(6vw, -5vh);
	}

	100% {
		transform: translate(7vw, 0);
		top: 46vh;
		opacity: 1;
	}
}

.bat:nth-child(7) {
	animation-name: fly-7;
	animation-duration: 8s;
	animation-delay: 3s;
}

@keyframes fly-7 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-5vw, -4vh);
	}

	40% {
		transform: translate(-9vw, 10vh);
	}

	60% {
		transform: translate(1vw, -1vh);
	}

	80% {
		transform: translate(9vw, 3vh);
	}

	100% {
		transform: translate(-2vw, 0);
		top: 49vh;
		opacity: 1;
	}
}

.bat:nth-child(8) {
	animation-name: fly-8;
	animation-duration: 6s;
	animation-delay: 3.5s;
}

@keyframes fly-8 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-1vw, -6vh);
	}

	40% {
		transform: translate(-4vw, 5vh);
	}

	60% {
		transform: translate(-2vw, 7vh);
	}

	80% {
		transform: translate(7vw, 1vh);
	}

	100% {
		transform: translate(-5vw, 0);
		top: 17vh;
		opacity: 1;
	}
}

.bat:nth-child(9) {
	animation-name: fly-9;
	animation-duration: 10s;
	animation-delay: 4s;
}

@keyframes fly-9 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-3vw, 1vh);
	}

	40% {
		transform: translate(-1vw, -3vh);
	}

	60% {
		transform: translate(7vw, 4vh);
	}

	80% {
		transform: translate(-1vw, 6vh);
	}

	100% {
		transform: translate(3vw, 0);
		top: 41vh;
		opacity: 1;
	}
}

.bat:nth-child(10) {
	animation-name: fly-10;
	animation-duration: 10s;
	animation-delay: 4.5s;
}

@keyframes fly-10 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(0, 0);
		opacity: 1;
	}

	20% {
		transform: translate(-5vw, -8vh);
	}

	40% {
		transform: translate(8vw, -9vh);
	}

	60% {
		transform: translate(6vw, 4vh);
	}

	80% {
		transform: translate(8vw, 8vh);
	}

	100% {
		transform: translate(0vw, 0);
		top: 53vh;
		opacity: 1;
	}
}

@keyframes heart-beat {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.05);
	}

	40% {
		transform: scale(1);
	}
}

@-webkit-keyframes text-gradient {
	0% {
		background-position: 0% 0%;
	}

	70% {
		background-position: 100% 0%;
	}

	100% {
		background-position: 100% 0%;
	}
}