/* https://css-loaders.com/ */
/* HTML: <div class="loader"></div> */
.loader {
	width: 50px;
	aspect-ratio: 1;
	--c: no-repeat linear-gradient(#A29490 0 0);
	background:
			var(--c) 0%   50%,
			var(--c) 25%  50%,
			var(--c) 50%  50%,
			var(--c) 75%  50%,
			var(--c) 100% 50%;
	background-size: 1px 100%;
	animation: l1 1s infinite linear;
}

@keyframes l1 {
	/* 0%: Start state (All full) */
	0%   {background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%}
	/* 16%: Bar 1 shrinks */
	16%  {background-size: 1px 10% , 1px 100%, 1px 100%, 1px 100%, 1px 100%}
	/* 32%: Bar 2 shrinks */
	32%  {background-size: 1px 100%, 1px 10% , 1px 100%, 1px 100%, 1px 100%}
	/* 48%: Bar 3 shrinks */
	48%  {background-size: 1px 100%, 1px 100%, 1px 10% , 1px 100%, 1px 100%}
	/* 64%: Bar 4 shrinks */
	64%  {background-size: 1px 100%, 1px 100%, 1px 100%, 1px 10% , 1px 100%}
	/* 80%: Bar 5 shrinks */
	80%  {background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 10% }
	/* 100%: All full again (Bar 5 has grown back) */
	100% {background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%}
}

#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;
}

#preloader.fade-out {
	transition: all 0.25s ease-in-out;
}