*
{
	margin:		0;
	padding:	0;

	/* stops the ugly highlighting - is this needed? */
	-webkit-tap-highlight-color: transparent;
   	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
     	user-select: none;
}

@font-face {
	font-family: "Fredoka One";
	src: url("fonts/FredokaOne-Regular.ttf");
}

body
{
	font-family:		'Fredoka One', Arial, FreeSans, "Liberation Sans", "Nimbus Sans L", DroidSans, sans-serif;
	text-align:		center;

	height: 		100vh;
	background:		linear-gradient(#555, #222);
	
	overflow:		hidden;
}

a
{
	color:			white;
	text-decoration: 	none;
}

:root {
	--textinitialtime:	2.5s;
	--textinterval:		0.5s;	
	--textfadetime: 	2.0s;
  	
  	--imageinitialtime:	2.5s;
 	--imageinterval:	0.5s;	
	--imagefadetime: 	0.25s;
}

@keyframes fadein
{
	0% 	{ opacity: 0;}
	100% 	{ opacity: 1;}
}

.introslide
{
	width:			min(25%, 50vh);
	position:		fixed;
	bottom:			10%;
	
}

#maintitle
{
	position:		fixed;
	top:			12.5%;
	left:			0%;
	
	width:			100%;
	margin: 		auto;

	font-size:		9vmin;

	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	2.0s;
	opacity:		0;
}

#flat8games
{
	position:		fixed;
	top:			33%;
	left:			0%;
	
	width:			100%;
	margin: 		auto;

	font-size:		4vmin;

	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	1.0s;
	opacity:		0;
}

#textdescription
{
	position:		fixed;
	top:			45%;
	left:			15%;
	
	width:			70%;
	margin:			auto;	
	
	font-size:		2.5vmin;
}
.line1
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*1);
	opacity:		0;
}
.line2
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*2);
	opacity:		0;
}
.line3
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*3);
	opacity:		0;
}
.line4
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*4);
	opacity:		0;
}
.line5
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*5);
	opacity:		0;
}

.slide1
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--imagefadetime);
	animation-delay:	calc(var(--imageinitialtime) + var(--imageinterval)*1);
	opacity:		0;
}
.slide2
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--imagefadetime);
	animation-delay:	calc(var(--imageinitialtime) + var(--imageinterval)*2);
	opacity:		0;
}
.slide3
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--imagefadetime);
	animation-delay:	calc(var(--imageinitialtime) + var(--imageinterval)*3);
	opacity:		0;
}
.slide4
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--imagefadetime);
	animation-delay:	calc(var(--imageinitialtime) + var(--imageinterval)*4);
	opacity:		0;
}
.slide5
{
	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--imagefadetime);
	animation-delay:	calc(var(--imageinitialtime) + var(--imageinterval)*5);
	opacity:		0;
}

#playposition
{
	position:		fixed;
	bottom:			7.5%;

	width:			100%;
	margin: 		auto;
}

#playbutton
{
	bottom:			7.5%;
	
	width:			20%;
	margin:			auto;

	font-size:		5.0vmin;
	
	background-color:	#0A0;
	border:			solid white 10px;
	border-radius:		999px;

	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	calc(var(--textinitialtime) + var(--textinterval)*6);
	opacity:		0;

	transition:		all 0.5s;
	-webkit-transition: 	all 0.5s;
	-moz-transition: 	all 0.5s;
	-o-transition: 		all 0.5s;
	-ms-transition: 	all 0.5s;
}
#playbutton:hover
{
    	background-color:	#7fff03;
	font-size:		2.75em;
	border:			solid white 15px;
}

#necromancerbutton
{
	position:		absolute;
	width:			12vw;
	height:			12vw;
	
	bottom:			1vh;
	right:			1vh;

	font-size:		2vw;
	
	background-color:	#000;
	border:			solid white 4px;
	border-radius:		8px;
	
	display:		flex;
  	flex-direction: 	column; 
  	align-items: 		center; 
  	
  	padding:		8px;	

	animation-name:		fadein;
	animation-fill-mode:	forwards;
	animation-duration:	var(--textfadetime);
	animation-delay:	1.0;
	opacity:		0;

	transition:		all 0.5s;
	-webkit-transition: 	all 0.5s;
	-moz-transition: 	all 0.5s;
	-o-transition: 		all 0.5s;
	-ms-transition: 	all 0.5s;
	
}
#necromancerbutton:hover
{
    	background-color:	#442;
    	width:			20vw;
    	height:			95vh;
    	font-size:		4vw;
	
}

#necromancertitle
{
	position:		relative;
	width:			100%;
	height:			100%;
	
}

#necromancertext
{
	position:		absolute;
	bottom:			0%;
	width:			100%;
}

#necromancerimage
{
	position:		absolute;
	width:			150%;
	bottom:			0%;
}

#footerinfo
{
	position: 		fixed;
	left:			0%;
	bottom: 		0;
	width: 			100%;
	margin: 		auto;
	
	font-size:		2.0vmin;
}