html,
body {
  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: #fc9a38;
}



#rocasfondo{
  position: absolute;
  width: 800px;
  height:  800px;
  top: -50px;
  background-image: url("art.gif");
  background-position: -2400px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px
}

#nubesfondo{
  position: absolute;
  width: 1600px;
  height:  800px;
  top: -50px;
 
  animation-name: nubesfondoanima;
  animation-duration: 42s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#nubesfondo1{
  position: absolute;
  width: 800px;
  height:  800px;
  left: 0px;
  background-image: url("art.gif");
  background-position: 0px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}

#nubesfondo2{
  position: absolute;
  width: 800px;
  height:  800px;
  left: 800px;
  background-image: url("art.gif");
  background-position: 0px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}

@keyframes nubesfondoanima {
  0%{left: 0px;}
  100%{left:-800px;}
}

#estatuas{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -800px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px
}

#nubesdelante{
  position: absolute;
  width: 1600px;
  height:  800px;
  animation-name: nubesdelanteanima;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
 
}

@keyframes nubesdelanteanima {
  0%{left: 0;}
  100%{left: -800px;}
  
}

#nubesdelante1{
  position: absolute;
  width: 800px;
  height:  800px;
  left: 0px;
  background-image: url("art.gif");
  background-position: 0px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px
}

#nubesdelante2{
  position: absolute;
  width: 800px;
  height:  800px;
  left: 800px;
  background-image: url("art.gif");
  background-position: 0px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px
}


#rocasdelante{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -1600px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px
}



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

#medusacola{
  top:100px;
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -2400px -800px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
  animation-name: colaanima;
  animation-duration: 22s;
  animation-iteration-count: infinite;
 transform-origin: 70% 96%;
}

@keyframes colaanima {
  0%{transform: rotate(0deg);}
  40%{transform: rotate(-20deg);}
  75%{transform: rotate(20deg);}
  100%{transform: rotate(0deg);}
}


#viboras2{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -1600px -800px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;

  animation-name: viboras2anima;
  animation-duration: 12s;
  animation-iteration-count: infinite;
 transform-origin: 50% 26%;
}

@keyframes viboras2anima {
  0%{transform: rotate(0deg);}
  40%{transform: rotate(-6deg);}
  75%{transform: rotate(6deg);}
  100%{transform: rotate(0deg);}
}




#viboras1{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -800px -800px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;

  animation-name: viboras1anima;
  animation-duration: 10s;
  animation-iteration-count: infinite;
 transform-origin: 50% 26%;
}

@keyframes viboras1anima {
  0%{transform: rotate(0deg);}
  46%{transform: rotate(6deg);}
  70%{transform: rotate(-6deg);}
  100%{transform: rotate(0deg);}
}


#medusacuerpo{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -0px -800px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}



#lanza{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -800px 0px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
  left: 500px;
  top:350px;

}

#placadetectora{
  background-color: red;
  opacity: 0;
  position: absolute;
  width: 800px;
  height:  800px;
}

#escudo{
 
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: 0px 0px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}

#rayosojos{
  opacity: 0;
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: 0px -2400px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}

#destelloojos{
  opacity: 0;
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -4000px -800px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}

#perdedor{
  
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -2400px 0px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;

}

#ganador{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -1600px 0px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}


#intro{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.gif");
  background-position: -3200px -1600px;
 background-repeat: no-repeat;
  background-size: 4800px 3200px;
}




#texto{
  user-select: none;
  position: absolute;
  text-align: center;
  width: 800px;
  top: 5px;
  background-color: black;
  color: white;
  font-family:'Times New Roman', Times, serif;
  letter-spacing: 20px;
  font-size: 25px;
  padding: 5px 0px 5px;
 
}