@import url('https://fonts.googleapis.com/css?family=Staatliches');

body {
	margin: 0;
}

.loader {
	font-family: 'Staatliches', cursive;
	z-index: 9999;
	position: fixed;
	left: 0;
	top: 0;
	background: radial-gradient(#2d3436, transparent); /* #b2bec3; */
	width: 100%;
	height: 100vh;
	animation: backgroundChange .5s linear 2s forwards, fadeOut .5s linear 3s forwards
}

.load-text {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	font-size: 10vmax;
	color: #e74c3c;
	width: fit-content;
	display: flex;
	animation: colorChange .5s linear 2s forwards;
}

.loaded-text {
	transform: scale(1.5);
	animation: scaleText .5s linear .5s forwards;
}

.loading-text {
	width: 0; /* 0 */
	overflow: hidden;
	animation: expand .5s linear .5s forwards;
}

main {
	padding: 1em;
	box-sizing: border-box;
	background-color: #e74c3c;
	color: white;
	min-height: 100vh;
	font-family: 'Open Sans', sans-serif;
}

@keyframes scaleText {
	from {transform: scale(1.5)}
	to {transform: scale(1)}
}

@keyframes expand {
	from {width: 0;}
	to {width: 21vmax;}
}

@keyframes backgroundChange {
	from {background-color: radial-gradient(black, transparent) /* #dfe6e9 */}
	to {background-color: radial-gradient(white, transparent) /* #ffffff */}
}

@keyframes colorChange {
	from {color: #dfe6e9}
	to {color: #fff}
}

@keyframes fadeOut {
	from {opacity: 1}
	to {
		opacity: 0; 
		z-index: -1;
	}
}