#loader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background: #232323dd;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	overflow: hidden;

	--cycle-first-color: #5aeb73;
	--cycle-second-color: #30d39d;
}

#loader .wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#loader .circle {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: var(--cycle-first-color);
	border-radius: 50%;
	animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
	transform-origin: bottom center;
	position: relative;
}

#loader .circle-1 {
	animation-delay: 0.1s;
}
#loader .circle-2 {
	animation-delay: 0.2s;
}
#loader .circle-3 {
	animation-delay: 0.3s;
}
#loader .circle-4 {
	animation-delay: 0.4s;
}
#loader .circle-5 {
	animation-delay: 0.5s;
}
#loader .circle-6 {
	animation-delay: 0.6s;
}
#loader .circle-7 {
	animation-delay: 0.7s;
}
#loader .circle-8 {
	animation-delay: 0.8s;
}

#loader.loaded {
	opacity: 0;
	transition: all 1.5s ease;
	transition-delay: 0.5s;
	pointer-events: none;
}

#loader.loaded .wrapper {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(1.5);
	transition: all 1.5s ease;
}

@supports not (backdrop-filter: blur(15px)) {
	#loader {
		background: #232323;
	}
}

@keyframes loading {
	0% {
		transform: translateY(0px);
		background-color: var(--cycle-first-color);
	}
	50% {
		transform: translateY(50px);
		background-color: var(--cycle-second-color);
	}
	100% {
		transform: translateY(0px);
		background-color: var(--cycle-first-color);
	}
}