html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}


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

#container, #perdedor, #ganador{  
position: absolute;
 width: 600px;
  height:  600px;
}

#sky{
  position: absolute;
  width:600px;
  height:600px;
  background-image: url("art.gif");
  background-position: 0px 0px;
  background-size: 2054px 1843px;
  top: 0px;
 left: 0px;
}


#nube{
  position: absolute;
  width:600px;
  height:181px;
  background-image: url("art.gif");
  background-position: -1200px -600px;
  background-size: 2054px 1843px;
  top: 220px;
 left: 0px;
 animation: nubesanima 34s linear  infinite;
}

@keyframes nubesanima {
  0%{left: -600px;}
 100%{left: 600px;}
}


#esfinje{
  position: absolute;
  width:600px;
  height:600px;
  background-image: url("art.gif");
  background-position: -600px 0px;
  background-size: 2054px 1843px;
  top: 0px;
 left: 0px;
}

#ala1{
  position: absolute;
  width:284px;
  height:276px;
  background-image: url("art.gif");
  background-position: -1348px 0px;
  background-size: 2054px 1843px;
  top: 20px;
 left: 320px;
 animation: alaanima 7s infinite;
 transform-origin: 10px 160px;

}

@keyframes alaanima {
  0%{transform: rotate(0deg);}
 50%{transform: rotate(10deg);}
 100%{transform: rotate(0eg);}
}

#ala2{
  position: absolute;
  width:284px;
  height:276px;
  background-image: url("art.gif");
  background-position: -1348px 0px;
  background-size: 2054px 1843px;
  top: 20px;
 left: 250px;
 animation: alaanima2 7s infinite;
 transform-origin: 10px 160px;
}

@keyframes alaanima2 {
  0%{transform: rotate(0deg);}
  40%{transform: rotate(10deg);}
 60%{transform: rotate(10deg);}
 100%{transform: rotate(0eg);}
}

#cabeza{
  position: absolute;
  width:141px;
  height:131px;
  background-image: url("art.gif");
  background-position: -1376px -313px;
  background-size: 2054px 1843px;
  top: 110px;
 left: 150px;
 animation: cabezaanima 12s infinite;
}

@keyframes cabezaanima {
  0%{transform: rotate(0deg);}
 50%{transform: rotate(10deg);}
 100%{transform: rotate(0eg);}
}

#brazo{
  position: absolute;
  width:149px;
  height:88px;
  background-image: url("art.gif");
  background-position: -1200px -202px;
  background-size: 2054px 1843px;
  top: 270px;
 left: 56px;
 animation: cabezaanima 10s infinite;
 transform-origin: 0 50%;
}



#cola{
  position: absolute;
  width:143px;
  height:140px;
  background-image: url("art.gif");
  background-position: -1200px -305px;
  background-size: 2054px 1843px;
  top: 270px;
 left: 366px;
 animation: colaanima 6s infinite;
 transform-origin: 29% 40%;
}

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

#antorcha0{
  position: absolute;
  width:222px;
  height:300px;
  top: 413px;
  left: 100px;
}

#antorcha1{
  position: absolute;
  width:222px;
  height:300px;
  top: 413px;
  left: 300px;
}

#antorcha2{
  position: absolute;
  width:222px;
  height:300px;
  top: 413px;
  left: 500px;
}



.llama{
  position: absolute;
  width:84px;
  height:111px;
  background-image: url("art.gif");
  background-position: -1205px -487px;
  background-size: 2054px 1843px;
  left: 28px;
  top: -40px;
}



.antorcha{
  position: absolute;
  width:123px;
  height:173px;
  background-image: url("art.gif");
  background-position: -1205px 0px;
  background-size: 2054px 1843px;
}

.brillo{
  position: absolute;
  width:223px;
  height:223px;
  background-image: url("art.gif");
  background-position: -605px -1000px;
  background-size: 2054px 1843px;
  left: -65px;
  top: -70px;
  opacity: 0.3;
  animation: brilloanima 2s infinite;
}

@keyframes brilloanima{
  0%{ opacity: 0.15;}
  30%{opacity: 0.05;}
 50%{opacity: 0.15;}
 65%{opacity:  0.05;}
 77%{opacity: 0.15;}
 87%{opacity:  0.05;}
 100%{opacity: 0.15;}
}

#perdedor, #ganador{
  display: none;
}

#perdedorfondo{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("art.gif");
  background-position: 0px -1200px;
  background-size: 2054px 1843px;
  animation: finalanima 0.2s infinite;
}

@keyframes finalanima {
  0%{top: 0  ; left:0px ;}
  30%{top: 5px; left:5px;}
  60%{top: 0;left:3px ;}
  80%{top:  5px;left:-5px ;}
  100%{top: 0;left:0px ;}
}

.marco{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("art.gif");
  background-position: -600px -1200px;
  background-size: 2054px 1843px;
}

#ganadorfondo{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("art.gif");
  background-position: 0px -600px;
  background-size: 2054px 1843px;
  animation: finalanima 0.2s infinite;
}

#ganadorgarra{
  position: absolute;
  width:449px;
  height:357px;
  left: 260px;
  top:130px;
  background-image: url("art.gif");
  background-position: -600px -600px;
  background-size: 2054px 1843px;
  animation: garraanima 0.3s infinite;
}

@keyframes garraanima {
  0%{top: 130px  ; left:260px;}
  30%{top: 133px; left:257px;}
  60%{top: 130px;left:263px;}
  80%{top:  125px;left:257px;}
  100%{top: 130px;left:260px;}
}

#textoinicial{
  display: none;
  user-select: none;
  width: 450px;
  color: white;
  position: absolute;
  top: 20px;
  left: 60px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 25px;
  background-color: black;
  border: 3px orange solid;
  padding: 10px;
}


#textoinput{
  display: none;
  user-select: none;
  width: 350px;
  color: white;
  position: absolute;
  top: 450px;
  height: 100px;
  left: 160px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 25px;
  background-color: black;
  border: 3px orange solid;
  padding: 10px;
}

#textinputinput{
  text-transform: uppercase;
  border: solid 2px orange;
  width: 230px;
  height: 40px;
  background-color: black;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  margin: 5px;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
}

#answerbutton{ 
  height: 55px;
  background-color: orange;
  color: black;
  font-weight: 900;
  font-family: 'Times New Roman', Times, serif;
}

#hazclicme{
  position: absolute;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
  line-height: 30px;
  top: 35px;
  left:110px;
  text-align: center;
  animation: clickmeanima 1s infinite;
}

@keyframes clickmeanima {
  0%{opacity: 1;}
  50%{opacity: 1;}
  51%{opacity: 0;}
  70%{opacity: 0;}
  71%{opacity: 1;}
}

.textofinal{
  position: absolute;
  user-select: none;
  width: 450px;
  color: white;
  position: absolute;
  top: 480px;
  left: 65px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 25px;
  background-color: black;
  border: 3px orange solid;
  padding: 10px;
}

#fadetoblack{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  display: none;
  opacity: 0;
}

#texto{
  color: white;
  width: 100%;
  font-size: 42px;
  padding: 33px;
  font-family: 'Times New Roman', Times, serif;
}