body {
	height: 100vh;
	background-image: url("assets/wallpaper.png");
	background-position: left bottom;
	background-repeat: no-repeat;
}

#arrow-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.arrow-falling {
	position: absolute;
	top: -200px;
	background-image: url('assets/arrow.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.4;
	pointer-events: none;
	animation: fall linear forwards;
}

@keyframes fall {
	0% {
		top: -200px;
		opacity: 0.2;
	}
	100% {
		top: 50vh;
		opacity: 0;
	}
}

/* i hate this */
.arrow-success {
	position: absolute;
	top: -400px;
	background-color: rgba(100, 255, 100, 0.8);
	-webkit-mask-image: url('assets/arrow.png');
	mask-image: url('assets/arrow.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.5;
	pointer-events: none;
	animation: successFall 1.5s linear forwards;
}

@keyframes successFall {
	0% {
		top: -400px;
		opacity: 0.5;
	}
	100% {
		top: 50vh;
		opacity: 0;
	}
}