:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--trans-dur: 0.3s;
	--ease-in: cubic-bezier(0.12,0,0.39,0);
	--ease-out: cubic-bezier(0.61,1,0.88,1);
}
.rapid_loader_container{
    width: 100vw;
    height: 100vh;
    font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));;
	color: var(--fg);
	display: grid;
	place-items: center;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
.loader_text{
    display: flex;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    margin-top: 2.5rem;
}
.pl {
	$debug: false;
	$dur: 0.72s;

	@if $debug == true {
		outline: 1px solid;
	} @else {
		filter: drop-shadow(0 0.1875em 0.0625em hsla(var(--hue),10%,10%,0.5));
	}
	position: relative;
	width: 12em;
	height: 12em;

	&__eye {
		@if $debug == true {
			outline: 1px solid;
		}
		top: 50%;
		left: 50%;
		width: 2em;
		height: 2em;

		&,
		&:before,
		&:after {
			position: absolute;
		}
		&:before,
		&:after {
			animation: {
				duration: $dur;
				iteration-count: infinite;
			};
			border-radius: 50%;
			box-shadow: 0 0 0 1em var(--fg) inset;
			content: "";
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		&:before {
			animation: {
				name: ring-out;
				timing-function: var(--ease-in);
			};
		}
		&:after {
			animation: {
				name: circle-in;
				timing-function: var(--ease-out);
			};
			transform-origin: 50% 25%;
		}

		$eyes: 12;
		@for $e from 1 through $eyes {
			&:nth-child(#{$e}) {
				transform: translate3d(-50%,-50%,0) rotate((-360deg / $eyes * ($e - 1))) translate3d(0,5em,0);

				&:before,
				&:after {
					animation-delay: -$dur * (($e - 1) / $eyes) * 2;
				}
			}
		}
	}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,20%);
		--fg: hsl(var(--hue),10%,90%);
	}
}
/* Animations */
@keyframes ring-out {
	from {
		box-shadow: 0 0 0 1em var(--fg) inset;
		transform: translate3d(0,0,0);
	}
	55%,
	to {
		box-shadow: 0 0 0 0 var(--fg) inset;
		transform: translate3d(0,-40%,0);
	}
}
@keyframes circle-in {
	from {
		// needed to prevent blinking in Safari and Chrome
		animation-timing-function: steps(1);
		transform: translate3d(0,0,0) scale(1);
	}
	1%,
	45% {
		animation-timing-function: var(--ease-out);
		transform: translate3d(0,-37.5%,0) scale(0);
	}
	to {
		transform: translate3d(0,0,0) scale(1);
	}
}