#preloader {
	background      : var(--preloader-bg);
	width           : 100%;
	height          : 100vh;
	overflow        : hidden;
	position        : fixed;
	top             : 0;
	left            : 0;
	z-index         : 200;
	display         : flex;
	justify-content : center;
	align-items     : center;
}

/* https://css-loaders.com/ */
/* HTML: <div class="loader"></div> */
/*.loader {
	width               : 40px;
	aspect-ratio        : 1;
	border-radius       : 50%;
	background          : radial-gradient(farthest-side, var(--colour-1) 94%, #0000),
	radial-gradient(farthest-side, var(--colour-2) 94%, #0000), var(--colour-1);
	background-position : center;
	background-repeat   : no-repeat;
	animation           : l4 1.5s infinite;
}*/
@keyframes l4 {
	0% {
		background-size : 0 0, 0 0
	}
	30%,
	50% {
		background-size : 0 0, 120% 120%
	}
	80%,
	100% {
		background-size : 120% 120%, 120% 120%
	}
}

/* HTML: <div class="loader"></div> */
.loader {
	height          : 15px;
	aspect-ratio    : 5;
	--_g            : no-repeat radial-gradient(farthest-side, var(--colour-1-lighter) 94%, #0000);
	background      : var(--_g), var(--_g), var(--_g), var(--_g);
	background-size : 20% 100%;
	animation       : l40-1 .75s infinite alternate,
	l40-2 1.5s infinite alternate;
}

@keyframes l40-1 {
	0%,
	10% {
		background-position : 0 0, 0 0, 0 0, 0 0
	}
	33% {
		background-position : 0 0, calc(100% / 3) 0, calc(100% / 3) 0, calc(100% / 3) 0
	}
	66% {
		background-position : 0 0, calc(100% / 3) 0, calc(2 * 100% / 3) 0, calc(2 * 100% / 3) 0
	}
	90%,
	100% {
		background-position : 0 0, calc(100% / 3) 0, calc(2 * 100% / 3) 0, 100% 0
	}
}

@keyframes l40-2 {
	0%, 49.99% {
		transform : scale(1)
	}
	50%, 100% {
		transform : scale(-1)
	}
}