body {background-color: var(--c-bg);overflow: auto;}
header {
	width:100%;height:100%;position: relative;overflow: hidden;text-align: center;
	background-color: #080A16;background-image: url(../assets/bg.png);
	background-size: cover;background-position: center;
}
header::before {
	content: "";position:absolute;top:0;left:0;background-color: var(--c-bg);
	height:100%;width:100%;opacity: 0.6;
}

@keyframes char {
	from {opacity:0;top: 5%;}
	to {opacity:1;top: -10%;}
}
@keyframes char2 {
	from {opacity:0;top: 5%;}
	to {opacity:1;top: -5%;}
}
.rchar {
	position: absolute;left: 45%;opacity:0;top:5%;height: 120%;z-index: 5;
	animation: char 1s ease-in-out forwards;
}
.leftmain {
	position: absolute;z-index: 3;left:10%;top: 20%;text-align: left;
	color: #DCDCDC;
}
.leftmain .titl {
	font-size: 10vw;font-family: 'Mr Dafoe', cursive;
	animation-delay: 0.5s;
}
.textun {
	position: relative;display: block;font-size: 1.2vw;
	animation-delay: 1s !important;
}

.leftmain a {
	position:relative;display: inline-block;font-size: 1.25vw;
	padding: 0.5vw 0;width: 38%;vertical-align: top;
	text-decoration: none;text-align: center;color: #DCDCDC;
	font-weight: 900;margin-top: 1.5vw;transition: all 0.2s ease-in-out;
}
#playbtn {background-color: #7289DA;margin-right: 4%;animation-delay: 1.5s;}
#playbtn:hover {background-color: #DCDCDC !important;color: #7289DA !important;}
#loadbtn {background-color: #b45bba;animation-delay: 2s;}
#loadbtn:hover {background-color: #DCDCDC !important;color: #b45bba !important;}


.topright {
	position: absolute;top:10%;right:5%;z-index: 10;
	text-align: right;
}
@keyframes socialhover {
	0% {transform: rotate(0deg);}
	25% {transform: rotate(-10deg);}
	50% {transform: rotate(0deg);}
	70% {transform: rotate(10deg);}
	100% {transform: rotate(0deg);}
}
.topright a {
	text-decoration: none;transition: all 0.2s ease-in-out;
	margin-bottom: 10vh;display: block;
}
.topright a img {height: 3vw;}
.topright a:hover {animation: socialhover 0.3s ease-in-out;}

@keyframes fade {from{opacity: 0;} to{opacity: 1;}}
.fadein {opacity:0;animation: fade 0.5s ease-in-out forwards;}
.lastscen {
	display:block;position:absolute;bottom: 0vw;left:0vw;font-size: 3.5vh;
	z-index: 900;color:white;float: left;
}
.lastscen img {width: 50vw !important;display: block !important;}

@media (max-width: 980px) {
	.rchar, .rchar2 {display: none;z-index: 1;}
	.rchar {
		display: block;left: 10%;width: 80%;height: auto;bottom: 0 !important;top: auto !important;animation: none !important;
		opacity: 1;
	}
	.leftmain {left:10%;top: 35%;text-align: center;width: 80%;}
	.leftmain .titl {font-size: 15vw;text-shadow: 0 0 1vw black;}
	.textun {font-size: 3.5vw;text-shadow: 0 0 1vw black;}

	.leftmain a {font-size: 4vw;padding: 1.5vw 0;margin-top: 3vw;}
	
	.topright {right: 10%;}
	.topright a {display: inline-block;margin-bottom: 0;margin-left: 10vw;}
	.topright a img {height: 10vw;}
	.lastscen {margin: 0;padding: 0;float: left;text-align: left;font-size: 2vh;}
	.lastscen img {width: 100vw !important;margin: 0 !important;
	position: absolute !important;bottom: 0 !important;left: 0 !important;}
}