html, body{
    height: 98%;
	width: 100%;
}

#marsText{

	width: 200px;
	height: 200px;
	text-align: center;
	color: white;
	right: 100px;
	bottom: 100px;
	top: -100px;
	left: -100px;
	position: relative;
	

}


#mars{
	height: 300px;
	width: 300px;
	background-image: url('images/mars.png');
	background-size: 300px;
	position: relative;
	top: -150px;
	bottom: 150px;
	left: -150px;
	right: 150px;
	
	color: white;
	text-align: center;
	font: bold 64px/300px arial;
	
	#-webkit-animation: marsZoom 1s infinite paused;
	#animation: marsZoom 1s infinite paused;
}

#asteroid{
	width: 128px;
	height: 128px;
	background-size: 128px;
	font: 20px/128px ABeeZee;
	text-align: center;
	color: white;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	z-index: 1;
	
}

#asteroidBackground{
	width: 128px;
	height: 128px;
	background-image:  url('images/asteroid.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundEarth{
	width: 128px;
	height: 128px;
	background-image:  url('images/earth.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundPhobos{
	width: 128px;
	height: 128px;
	background-image:  url('images/phobos.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundDeimos{
	width: 128px;
	height: 128px;
	background-image:  url('images/deimos.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundSun{
	width: 128px;
	height: 128px;
	background-image:  url('images/sun.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundMecury{
	width: 128px;
	height: 128px;
	background-image:  url('images/mecury.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundVenus{
	width: 128px;
	height: 128px;
	background-image:  url('images/venus.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundJupiter{
	width: 128px;
	height: 128px;
	background-image:  url('images/jupiter.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

#asteroidBackgroundMoon{
	width: 128px;
	height: 128px;
	background-image:  url('images/moon.png');
	background-size: 128px;
	position: relative;
	right: 64px;
	bottom: 64px;
	top: -64px;
	left: - 64px;
	
	#-webkit-animation: spin 25s linear infinite running;
	#animation: spin 25s linear infinite running;

}

@font-face {
    font-family: 'ABeeZee'; /*a name to be used later*/
    src: url('fonts/ABeeZee-Regular.ttf'); /*URL to font*/
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
