:root {
	--transition-time: 0.1s;
}

@keyframes loader-spin {
	  0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.page-loader {
	width: 100%;
	height: 0;
	left: 0;
	top: 0;
	position: fixed;
	background: rgba(21, 24, 29, 0.5);
	z-index: 1000;
	opacity: 0;
	transition-timing-function: ease-out;
	transition-duration: var(--transition-time), 0;
	transition-property: opacity, height;
	transition-delay: 0, var(--transition-time);
	overflow: hidden;
}

.page-loader:before {
	width: 4em;
	height: 4em;
	border-radius: 50%;
	border: 0.5em solid transparent;
	border-top-color: white;
	border-bottom-color: white;
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	animation: loader-spin 0.5s linear infinite;
	pointer-events: none;
}

html.loading {
	overflow: hidden;
}

html.loading body {
	overflow: hidden;
}

html.loading .page-loader {
	opacity: 1;
	height: 100%;
	transition-delay: 0, 0;
}