.loading-screen {
	z-index: 1000;

	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	opacity: 1;
	visibility: visible;

	transition:
		opacity 0.4s ease,
		visibility 0.4s ease;

	background-image: radial-gradient(circle farthest-corner at center, rgb(6, 0, 8) 0%, rgb(4, 7, 13) 100%);
}

.loading-screen.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loading-screen .loader {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	perspective: 800px;
}

.loading-screen .loader .line {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.loading-screen .loader .l-one {
	left: 0;
	top: 0;

	border-bottom: 3px solid #efeffa;
	animation: rotate-one 0.9s linear infinite;
}

.loading-screen .loader .l-two {
	top: 0;
	right: 0;

	border-right: 3px solid #efeffa;
	animation: rotate-two 0.6s linear infinite;
}

.loading-screen .loader .l-three {
	right: 0;
	bottom: 0;

	border-top: 3px solid #efeffa;
	animation: rotate-three 0.9s linear infinite;
}

.loading-screen .loading-text {
	margin-top: 20px;

	font-family: "Metropolis", sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.1px;

	color: #efeffa;

	user-select: none;
}

.loading-screen .loading-subtext {
	margin-top: 20px;

	font-family: "Metropolis", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 2px;

	color: rgb(168, 168, 168);
	user-select: none;
}

@keyframes rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}