html{
  text-align: center;
  width: 1330px;
  height: 600px;
}
body{
  text-align: center;
  height: 600px;
  cursor: url("./arturo.png"),progress;
}


@keyframes HaceTiempo {
  0%{
   margin-right: 100%;

  }
  50%{
    margin-right: 15%;
   }
   80%{
    margin-right: 15%;
   }
  
   100%{
     margin-right: 100%;
    
   }

}
@keyframes Logo{
  0%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  5%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  10%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  
  15%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  20%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  25%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  30%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  40%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  45%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  50%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  55%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  60%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  65%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  70%{
    width:0%;
    height: 0px;
    margin-top: 100px;
  }
  75%{
    width: 70%;
    margin-right: 15%;
    height: 400px;
    margin-top: 100px;
  }
  
  80%{
    width: 70%;
    margin-right: 15%;
    height: 400px;
    margin-top: 100px;
  }

  85%{
    width: 70%;
    margin-right: 15%;
    height: 400px;
    margin-top: 100px;
  }
  
  90%{
    width: 70%;
    margin-right: 15%;
    height: 400px;
    margin-top: 100px;
  }

  95%{
    width: 70%;
    margin-right: 15%;
    height: 400px;
    margin-top: 100px;
  }
 
  100%{
    width: 70%;
    margin-right: 100%;
    height: 400px;
    margin-top: 100px;
  }
}
@keyframes Historia {
  0%{
    margin-top: 800px;

  }
  10%{
    margin-top: 800px;
  }
  50%{
    margin-top: 800px;
  
   }
 

}



.logo {
  width: 70%;
  margin-right: 100%;
  height: 400px;
  margin-top: 100px;
  animation: Logo 18s 1;
  position: absolute;
}


.LogoInicioJuego {
  width: 50%;
  margin-right: 25%;
  height: 100px;
  margin-top: 40px;
  position: absolute;
}
.theGame{
  width: 28%;
  margin-right: 34%;
  height: 80px;
  margin-top: 170px;
  position: absolute;
}


.haceTiempo  {
  width: 70%;
  margin-right: 100%;
  height: 400px;
  margin-top: 100px;
  animation: HaceTiempo 13s 1;
  position: absolute;
}


.historia {
  width: 70%;
  margin-right: 15%;
  height: 500px;
  margin-top: 50px;
  animation: Historia 32s 1;
  position: absolute;
}
.ocultar{
visibility: hidden;
}

.Jugar{
  background-color: black;
  text-align: center;
  margin-top: 350px;
  margin-right: 0px;
  color: white;
  font-size: 25px;
  background-color: rgb(20, 20, 20,.5);
  padding:30px 50px ;
  position: relative;
  cursor: url("./arturo.png");  

}
.Jugar:hover{
  cursor: url("./arturo.png"),progress; 
  font-size:30px;
}



@keyframes cazaEstelar {
  0%{
    width: 0%;
    height: 0;
    margin-right: 10%;
    margin-top: 50px;
  }
  100%{
    width: 19%;
    height: 250px;
    margin-right: 70%;
    margin-top: 300px;
    position: absolute;
  }
}
@keyframes Interceptor {
  0%{
    width: 0%;
    height: 0;
    margin-right: 10%;
    margin-top: 50px;
  }
  60%{
    width: 0%;
    height: 0;
    margin-right: 10%;
    margin-top: 50px;
  }
  100%{
  width: 19%;
  height: 220px;
  margin-right: 10%;
  margin-top: 300px;
  position: absolute;
  }
}
@keyframes Milenario {
  0%{
    width: 0%;
    height: 0;
    margin-right: 10%;
    margin-top: 50px;
  }
  50%{
    width: 0%;
    height: 0;
    margin-right: 10%;
    margin-top: 50px;
  }
  100%{
    width: 19%;
    height: 250px;
    margin-right: 40%;
    margin-top: 300px;
    position: absolute;
  }
}

.cazaEstelar{
  width: 19%;
  height: 250px;
  margin-right: 70%;
  margin-top: 300px;
  position: absolute;
  animation: cazaEstelar 2s 1;

}
.cazaEstelar:hover{
  width: 23%;
  height: 300px;
  margin-right: 70%;
  margin-top: 300px;
  position: absolute;
  cursor: url("./arturo.png"),progress;

}
.halcon{
  width: 19%;
  height: 250px;
  margin-right: 40%;
  margin-top: 300px;
  position: absolute;
  animation: Milenario  3s 1;

}
.halcon:hover{
  width: 23%;
  height: 300px;
  margin-right: 40%;
  margin-top: 300px;
  position: absolute;
  cursor: url("./arturo.png"),progress;

}

.Interceptor{
  width: 19%;
  height: 220px;
  margin-right: 10%;
  margin-top: 300px;
  position: absolute;
  animation: Interceptor  4.3s 1;

}
.Interceptor:hover{
  width: 22%;
  height: 280px;
  margin-right: 10%;
  margin-top: 300px;
  position: absolute;
  cursor: url("./arturo.png"),progress;

}

.selecciona{
  width: 40%;
  margin-right: 29%;
  height: 40px;
  margin-top: 170px;
  position: absolute;
} 

.NaveElegidaTexto{
  margin-right: 25%;
  margin-top: 50px;
  width: 50%;
  height: 60px;

}

.NaveElegida{
  margin-right: 29%;
  margin-top: 180px;
  width: 38%;

}







@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png);
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
  position: absolute;
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
	
}

.clouds{
  position: absolute;
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
img{
  position: absolute;
  height: 70vh;
  width:70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}

.enter{
  position: absolute;
  margin-right: 20px;
  width: 20%;
  height: 70px;
}