body {
	margin: 0px;
	padding: 0px;
}

.main {
	width: 100%;
	height: 100vh;
	background:linear-gradient(80deg,#110e1f,#1b1730);
	position: fixed;
	top:0px;
	left:0px;
	z-index: 9999;
}

.text {
	width: 100%;
	height: 100vh;
	background: url(images/bg.jpg);
	background-size: 100% 100%;
	background-position: center;
	font-family:'barlow', sans-serif;	
	font-size: 80px;
	text-align: center;
	line-height: 650px;
	position: absolute;
	top: 55%;
	left: 50%;
	/*transform: translate(-50%,-50%) rotate(-5deg);*/
	transform: translate(-50%,-50%);
	color: #d2006b;
	-webkit-background-clip: text;
	pointer-events: none;
	animation: anim1 1s infinite, anim2 10s forwards ;
}

@keyframes anim1 {
	0%{background-image: url(images/bg.jpg);}
	10%{background-image: url(images/display.jpg);}
	20%{background-image: url(images/bg.jpg);}
	30%{background-image: url(images/display.jpg);}
	40%{background-image: url(images/bg.jpg);}
	50%{background-image: url(images/display.jpg);}
	60%{background-image: url(images/bg.jpg);}
	70%{background-image: url(images/display.jpg);}
	80%{background-image: url(images/bg.jpg);}
	90%{background-image: url(images/display.jpg);}
	100%{background-image: url(images/bg.jpg);}
}

@keyframes anim2 {
	from {color: #d2006b;}
	to{color: transparent;}
}

.title {
	font-family: monospace;
	font-size: 12px;
	color: #FFF;
	letter-spacing: 5px;
	position: absolute;
	top: 60%;
	left:50%;
	transform: translate(-50%,-50%);
}

.bar {
	width: 80px;
	height: 2px;
	background-color: #282246;
	position: absolute;
	top: 63%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:999;
}

#fill {
	width: 0%;
	height: 100%;
	background-color: white;
	position: relative;
	top: 0px;
	left:0px;
}