.layer-loader {
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	visibility: visible;
	background: rgba(15, 15, 15,0.4);
	transition: all 0.5s ease-in-out;
	position: fixed;
	height: 100vh;
	width: 100vw;
}

.loading-hidden {
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.cube {
	margin: auto;
	font-size: 24px;
	height: 1em;
	width: 1em;
	position: relative;
	transform: rotatex(30deg) rotatey(45deg);
	transform-style: preserve-3d;
	animation: cube-spin 1.5s infinite ease-in-out alternate;
}

	.cube .side {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transform-style: preserve-3d;
	}

		.cube .side::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #101d3a;
			transform: translatez(0.5em);
			animation: cube-explode 1.5s infinite ease-in-out;
			opacity: 0.5;
		}

		.cube .side:nth-child(1) {
			transform: rotatey(90deg);
		}

		.cube .side:nth-child(2) {
			transform: rotatey(180deg);
		}

		.cube .side:nth-child(3) {
			transform: rotatey(270deg);
		}

		.cube .side:nth-child(4) {
			transform: rotatey(360deg);
		}

		.cube .side:nth-child(5) {
			transform: rotatex(90deg);
		}

		.cube .side:nth-child(6) {
			transform: rotatex(270deg);
		}

@keyframes cube-spin {
	0% {
		transform: rotatex(30deg) rotatey(45deg);
	}

	100% {
		transform: rotatex(30deg) rotatey(405deg);
	}
}

@keyframes cube-explode {
	0% {
		transform: translatez(0.5em);
	}

	50% {
		transform: translatez(0.75em);
	}

	100% {
		transform: translatez(0.5em);
	}
}
@keyframes l20-1 {
	0% {
		clip-path: polygon(50% 50%,0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0% )
	}

	12.5% {
		clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0% )
	}

	25% {
		clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100% )
	}

	50% {
		clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )
	}

	62.5% {
		clip-path: polygon(50% 50%,100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )
	}

	75% {
		clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100% )
	}

	100% {
		clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100% )
	}
}

@keyframes l20-2 {
	0% {
		transform: scaleY(1) rotate(0deg)
	}

	49.99% {
		transform: scaleY(1) rotate(135deg)
	}

	50% {
		transform: scaleY(-1) rotate(0deg)
	}

	100% {
		transform: scaleY(-1) rotate(-135deg)
	}
}
/* HTML: <div class="loader"></div> */
.loader {
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid #514b82;
	animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}