@import "colors.less";

@font-face
{
    font-family: bitty;
    src: url('../fonts/bitty.ttf');
}

.loader-container {
	width: 100vw;
	height: 100vh;

	.loader {
		animation: loader-spin 1s linear infinite;
		height: 10px;
		width: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateXY(-50%, -50%);
	}

	.loader-text {
		position: absolute;
		top: calc(50% + 75px);
		width: 100%;
		text-align: center;
		color: @white;
		font-size: 24px;
	}

	@keyframes loader-spin {
		0% {
			box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		6.25% {
			box-shadow: 0px -30px transparent, 10px -30px @blueD, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @white, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		12.5% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px @blueD, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @white, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		18.75% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px @blueD, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @white, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		25% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px @blueD, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @white, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		31.25% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px @blueD, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @white, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

		37.5% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px @blueD, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @white, -20px -20px transparent, -10px -30px transparent;
		}

		43.75% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px @blueD, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @white, -10px -30px transparent;
		}

		50% {
			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px @blueD, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @white;
		}

		56.25% {
			box-shadow: 0px -30px @white, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px @blueD, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
		}

		62.5% {
			box-shadow: 0px -30px @blueA, 10px -30px @white, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px @blueD, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
		}

		68.75% {
			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @white, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px @blueD, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
		}

		75% {
			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @white, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px @blueD, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;
		}

		81.25% {
			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @white, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px @blueD, -20px -20px @blueA, -10px -30px @blueA;
		}

		87.5% {
			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @white, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px @blueD, -10px -30px @blueA;
		}

		93.75% {
			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @white, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px @blueD;
		}

		100% {
			box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;
		}

	}
}
