@import 'https://fonts.googleapis.com/css?family=Press+Start+2P';

*{
  box-sizing: inherit;
  	font-family: 'Press Start 2P';
}

body {
	font-family: 'Press Start 2P';
    background-color: white;
	padding: 0;
	margin:0;
}

.contenedor{
	margin:0 auto;
    width: 850px;
    padding: 10px;
    border: 3px solid black;
    background-image: url('space.jpg');
    text-align: center;
}

.blackhole {
    display: inline-block;
    width: 210px;
    height: 210px;
	border-color: black;
	border:1px solid #222;
	box-shadow:   -15px 0 0 0 black,
                 15px 0 0 0 black,
                 0 -15px 0 0 black,
                 0 15px 0 0 black;
	margin:30px;
	padding:0 5px;
	background-color:#ddd;
}

.asteroid {
	cursor:pointer;
	display: inline-block;
    width: 210px;
    height: 210px;
	background-image: url('meteorito.png');
	border-color: black;
	box-shadow:   -15px 0 0 0 black,
                 15px 0 0 0 black,
                 0 -15px 0 0 black,
                 0 15px 0 0 black;
    transform: rotate(2deg);
	margin:30px;
	padding:0 5px;
}

.score {
	display: inline-block;
	float:left;
	width:260px;
	color: #fff;
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: .1em;
	border: none;
	background:#52cc3f;	
	padding:10px;
	text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
    border-bottom: 3px solid rgba(16, 91, 146, 0.5);
	border-top: 3px solid rgba(255,255,255,.3);
	line-height:70px;
	border-radius:1rem;
	text-align: center;
}


.life{
	display: inline-block;
	float:right;
	width:260px;
	color: #fff !important;
	text-decoration: none !important;
	outline: none !important;
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: .1em;
	text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px  #004a87;
	border: none;
	background:#45b1f4;	
	padding:10px;
    border-bottom: 3px solid rgba(16, 91, 146, 0.5);
	border-top: 3px solid rgba(255,255,255,.3);
	line-height:70px;
	border-radius:1rem;
	text-align: center;
}

.start {
	display: inline-block;
	width:150px;
	position: relative;
	top: 0;
	cursor: pointer;
	text-decoration: none !important;
	outline: none !important;
	font-size: 20px;
	line-height: 1.5em;
	letter-spacing: .1em;
	text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px  #c96100;
	border: none;
	margin: 15px 15px 30px;
	background: #ffc200;
	border-bottom: 3px solid rgba(205, 102, 0, 0.5);
	border-top: 3px solid rgba(255,255,255,.3);
	color: #fff !important;
	border-radius: 8px;
	padding: 8px 15px 10px;
	box-shadow: 0 6px 0 #b76113;
}

.start:active {
  top:2px;
  box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3);
}

#img{
	transform: translate(210px,-210px);
    -webkit-transform: translate(210px,-210px);
    -o-transform: translate(210px,-210px); 
    -moz-transform: translate(210px,-210px);
}

/*.sprite {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('Explosion.png');
    transform: scale(1);    
    animation: play 1s steps(16) infinite;
}*/

#gameOver{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	text-align: center; 
	width: 400px;
	height: 280px;
	text-decoration: none !important;
	outline: none !important;
	font-size: 20px;
	line-height: 1.5em;
	letter-spacing: .1em;
	text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px  #c96100;
	border: none;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: auto;
	margin-top: auto;
	background: #ffc200;
	border-bottom: 3px solid rgba(205, 102, 0, 0.5);
	border-top: 3px solid rgba(255,255,255,.3);
	color: #fff !important;
	border-radius: 8px;
	padding: 8px 15px 10px;
	box-shadow: 0 6px 0 #b76113;
}