html,
body {
  user-select: none;
  margin: 0;
  padding: 0;
background-color: black; 


  width: 100vw;
  height: 100vh;
  overflow: hidden;
}



#megacontainer { 
 overflow: hidden;
 position: relative;
   width: 800px;
    height:  800px;

  }

#container{
  overflow: hidden;
position: relative;
 width: 800px;
  height:  800px;

background-repeat: no-repeat;
background-color: #42a6c1;
}


#tierraabajo{
  background-color: #023a32;
  position: absolute;
  width: 800px;
  height: 300px;
  top: 700px;
}

#intro{
  position: absolute;
 width: 800px;
 height: 800px;
 }

#introgradient{
  position: absolute;
  width: 800px;
  height: 800px;
 background-image: linear-gradient( #66aaa0,#fff6c7)
}

#introbackground{
 position: absolute;
width: 800px;
height: 800px;
background-image: url("template.gif");
background-size: 1628px 3551px;
background-position: -800px 0px ;
}

.villanoroller{
position: absolute;
width: 133px;
height: 133px;
background-image: url("template.gif");
background-size: 1628px 3551px;

animation-name: girarvillano;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.villanocurver{  
  position: absolute;
  width: 133px;
  height: 133px;
  background-image: url("template.gif");
  background-size: 1628px 3551px;

  animation-name: villanocurverbombea;
  animation-duration: 6s;
  animation-iteration-count: infinite;

  }

  @keyframes villanocurverbombea {
    0%{transform: rotate(0deg)}     
    100%{transform: rotate(360deg)}  
   }


.villanoeagle{
  position: absolute;
  width: 133px;
  height: 133px;
  background-image: url("template.gif");
  background-size: 1628px 3551px;
  animation-name: villanoeaglebombea;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  }
  
  @keyframes villanoeaglebombea {
    0%{transform: rotate(20deg)}  
    50%{transform: rotate(40deg)}  
     100%{transform: rotate(20deg)}  
   }


.villanocrawler{
  position: absolute;
  width: 133px;
  height: 133px;
  background-image: url("template.gif");
  background-size: 1628px 3551px;
  animation-name: villanocrawlerbombea;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  }

  @keyframes villanocrawlerbombea {
    0%{transform: scale(1)}  
    50%{transform: scale(1.3)}  
     100%{transform: scale(1)}
   }


.villanoflyer{
  position: absolute;
  width: 133px;
  height: 133px;
  background-image: url("template.gif");
  background-size: 1628px 3551px;

  animation-name: villanoflyerbombea;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  }

  @keyframes villanoflyerbombea {
    0%{transform: scale(1, 1)}  
    50%{transform: scale(1.4, 1)}  
     100%{transform: scale(1, 1)}
   }


@keyframes girarvillano {
  0%{transform: rotate(0deg)}  
   100%{transform: rotate(-360deg)}
 }
 
 #textointro{
  user-select: none;
  position: absolute;
 font-family: Arial, Helvetica, sans-serif;
 color: black;
  font-weight:900;
  font-size: 45px;
  line-height: 46px;
  animation-name: introtexto;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  top: 500px;
  left: 55px;
}

@keyframes introtexto {
  0%{opacity: 1;}
  50%{opacity: 1;}
  51%{opacity: 0;}
  60%{opacity: 0;}
 
}

#runner{
  position: absolute;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: 0 -800px ;
  background-size: 1628px 3551px;  
}

#runnerevol{
  position: absolute;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: -266px -1000px ;
  background-size: 1628px 3551px;  
}

#lifes{
  position: absolute;
  width: 100%;
  display: flex; 
  flex-direction: row;
  justify-content: center;
  top: 630px;
}

.vidaleft{
width: 54px;
height: 54px ;
background-image: url("template.gif");
background-position: 0 -2932px ;
background-size: 1628px 3551px;
}

#gem1{
  position: absolute;
  top: 100px;
  left: 345px;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: 0 -1200px ;
  background-size: 1628px 3551px;
}

#gem2{
  position: absolute;
  top: 285px;
  left: 540px;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: -133px -1200px ;
  background-size: 1628px 3551px;
}

#gem3{
  position: absolute;
  top: 480px;
  left: 345px;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: 0px -1400px ;
  background-size: 1628px 3551px;
}

#gem4{
  position: absolute;
  top: 290px;
  left: 155px;
  width: 133px;
  height:  200px;
  background-image: url("template.gif");
  background-position: -133px -1400px ;
  background-size: 1628px 3551px;
}



.gemaElemento, .gemaElementointro{

  position: absolute;
  width: 133px;
  height: 200px;
  background-image: url("template.gif"); 
  background-size: 1628px 3551px;
  animation-name: gemabrilla;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

@keyframes gemabrilla {
  0%{filter: brightness(1);}
  50%{filter: brightness(1.4);}
  100%{filter: brightness(1);}
  
}

#fondomonster{ 
  opacity: 0.7; 
  width: 800px;
  height: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 700px;
  animation-name: monstergira;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes monstergira {
 0%{transform: skew(-5deg)}
 50%{transform: skew(5deg)}
  100%{transform: skew(-5deg)}
}

#monstermitad1{

  width: 400px;
  height:  800px;
  background-image: url("template.gif");
  background-position: 0 0px ;
  background-size: 1628px 3551px;
}

#monstermitad2{
 transform: scale(-100%,100%);
  width: 400px;
  height:  800px;
  background-image: url("template.gif");
  background-position: 0 0px ;
  background-size: 1628px 3551px;
}

#burbujas{ 
  opacity: 0.5;
  width: 400px;
  height:  800px;
  background-image: url("template.gif");
  background-position: -410px 0px ;
  background-size: 1628px 3551px;
  position: absolute;
  animation-name: monstergira;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}

#burbujas2{ 
  opacity: 0.6;
  width: 400px;
  height:  800px;
  background-image: url("template.gif");
  background-position: -410px 0px ;
  background-size: 1628px 3551px;
  position: absolute;
  animation-name: monstergira;
  animation-duration: 7s;
  animation-iteration-count: infinite;

 transform: scale(200%);
}

#controlers{
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 80px;
  top: 700px;
}

#flechaizquierda{
  width: 80px;
  height: 80px;
  background-image: url("template.gif");
  background-position: -800px -1600px ;
  background-size: 1628px 3551px;
}

#flechaderecha{
  width: 80px;
  height: 80px;
  background-image: url("template.gif");
  background-position: -880px -1600px ;
  background-size: 1628px 3551px;
}

#flechaespacio{
  width: 300px;
  height: 80px;
  background-image: url("template.gif");
  background-position: -960px -1600px ;
  background-size: 1628px 3551px;
}



#tierra{
  padding: 0; 
  margin: 0;
  top: 480px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: absolute;
  width: 1600px;
  height:  300px;
}

.tierratextura{
  width: 400px;
  height:  300px;
  background-image: url("template.gif");
  background-position: 0px -1600px ;
  background-size: 1628px 3551px;
}

#soundonoff{
  user-select: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight:900;
  font-size: 15px;
  color: white;
  position: absolute;
  top: 10px;
  left: 650px;
}


#texto{
  position: absolute;
 font-family: Arial, Helvetica, sans-serif;
  font-weight:900;
  font-size: 55px;
  line-height: 46px;
  user-select: none;
  text-align: center;
  width: 800px;
  top: 300px;
  background-color: black;
  color: white;
  padding: 25px 0px 25px;
 
}