*
{	
	margin:			0;
	padding:		0;
	box-sizing: 		border-box;	
}

:root {	
	--buttonhovertime:	0.5s;	
}

/* split the screen into two equal divs with internal padding that shrinks when under the mouse */
.divsides
{
	position:		absolute;
	top:			0%;
	bottom:			0%;
	
	/*border:		solid white 2px;*/
	padding:		5%;
	
	background:		linear-gradient(cyan, #444);
	
	transition:		all var(--buttonhovertime);
	-webkit-transition: 	all var(--buttonhovertime);
	-moz-transition: 	all var(--buttonhovertime);
	-o-transition: 		all var(--buttonhovertime);
	-ms-transition: 	all var(--buttonhovertime);
}
.divsides:hover
{
	padding-top:		2.5%;
	padding-bottom:		2.5%;
}
.divleft
{
	left:			0%;
	right:			50%;
	
	padding-left:		10%;	
}
.divleft:hover
{
	padding-left:		10%;
	padding-right:		0%;
}
.divright
{
	left:			50%;
	right:			0%;
	
	padding-right:		10%;
}
.divright:hover
{
	padding-left:		0%;
	padding-right:		10%;
}

/* divs containing the images - fill the outer divs up to the scaleable margins */
.buttondiv
{
	width:			100%;
	height:			100%;
	
	border:			outset white 8px;
	border-radius:		16px;
	
	overflow: 		hidden;
	position: 		relative;
}
.blocktrain
{
	background-color:	rgb(0, 255, 0);
}
.necromancer
{
	background-color:	black;
}

/* place pngs */
.backgroundimage
{
 	top: 			0;
 	left: 			0;
 	width: 			100%;
 	height: 		100%;
  	object-fit: 		cover;
}
.blocktraintitle
{
	position: 		absolute; 
	top: 			5%; 
	left: 			0%; 
	width:			85%;
}
.necromancertitle
{
	position: 		absolute; 
	top: 			5%;  
	left:			5%;
	width:			90%;
}
.playbutton
{
	position: 		absolute; 
	left: 			0;
	right:			0;
	margin: 		auto;

	bottom: 		5%; 
	width:			20%;
}