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



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

#container{  
position: absolute;
 width: 25000px;
  height:  800px;
}

#marcontainer{  
  
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  position: absolute;
   width: 25000px;
    height:  800px;
    top: 220px;
    animation:  marskew 10s  infinite ;
  }

  @keyframes marskew {
    0%{transform: skew(-20deg);}
    50%{transform: skew(20deg);}
   100%{transform: skew(-20deg);}
  }

  #marcontainer2{  
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
    position: absolute;
     width:25000px;
      height:  800px;
      top:190px;
      animation:  marskew2 15s  infinite ;
      
    }

    @keyframes marskew2 {
      0%{left: -90px;}
      50%{left: 90px;}
     100%{left: -90px;}
    }

.mar{

  width:800px;
  height:800px;
  background-image: url("artgif.gif");
  background-position: -800px 0px;
  background-size: 2537px 1741px;
}

#sol{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("artgif.gif");
  background-position: 0px 0px;
  background-size: 2537px 1741px;
  top: -500px;
  animation: solgira 25s linear infinite;
}

@keyframes solgira {
  0%{rotate: 0deg;}
  100%{rotate: 360deg;}
}

#rayos{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("artgif.gif");
  background-position:  -1600px -800px ;
  background-size:  2537px 1741px;
 
}


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

#cliff{
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("artgif.gif");
  background-position:  -800px -800px ;
  background-size:  2537px 1741px;
  top: 150px;
}


#cliff2{
  transform: scale(-1,1);
  position: absolute;
  width:800px;
  height:800px;
  background-image: url("artgif.gif");
  background-position:  -800px -800px ;
  background-size:  2537px 1741px;
  top: 150px;
  left: 15000px;
}

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

#border1{
  top: -5px;
  left: 0px;
  position: absolute;
  display: flex;
  flex-direction: row;
    justify-content: start;
    align-items: flex-start;  
  width:8000px;
  height:50px;
}

#border2{
  top: 755px;
  left: 0px;
  position: absolute;
  display: flex;
  flex-direction: row;
    justify-content: start;
    align-items: flex-start;  
  width:8000px;
  height:50px;
}

.bordertramado{

  width:800px;
  height:50px;
  background-image: url("artgif.gif");
  background-position:  -1600px -400px ;
  background-size:  2537px 1741px; 
}

#dialogoface{
  position: absolute;
  width:160px;
  height:160px;
  background-image: url("artgif.gif");
  background-position:  -480px -1122px ;
  background-size:  2537px 1741px;
  top: 460px;
  left: 20px;
}

#dialogotexto{ 
  user-select: none;
   position: absolute;
   background-color: black;
   padding: 25px;
   font-family: 'Times New Roman', Times, serif;
  width:470px;

  font-size: 40px;
  text-align: center;
  color: white;
  border: solid orange 15px;
  top: 450px;
  left: 220px;

}


#icarus{
  position: absolute;
  width:160px;
  height:160px;
  background-image: url("artgif.gif");
  background-position:  0px -1122px ;
  background-size:  2537px 1741px;
  top: 265px;
  left: 20px;
}

#dedalus{
  position: absolute;
  width:160px;
  height:160px;
  background-image: url("artgif.gif");
  background-position:  -160px -1122px ;
  background-size:  2537px 1741px;
  top: 265px;
  left: 150px;
}

#dedalus2{
  position: absolute;
  width:160px;
  height:160px;
  background-image: url("artgif.gif");
  background-position:  -160px -1122px ;
  background-size:  2537px 1741px;
  top: 265px;
  left: 15500px;
}

#fundidoanegro{
  position: absolute;
  width:800px;
  height:800px;
  background-color: black;
 
}

#nube1{
  top: 50px;
  left: 550px;
}

#nube2{
  top: 250px;
  left: 2000px;
}

#nube4{
  top: 150px;
  left: 12000px;
}

#nube3{
  top: 50px;
  left: 4000px;
}

#nube5{
  top: 150px;
  left: 7000px;
}

#nube6{
  top: 450px;
  left: 10000px;
}





.nube{
  opacity: 0.9;
  position: absolute;
  width:800px;
  height: 380px;
  background-image: url("artgif.gif");
  background-position:  -1600px 0px ;
  background-size:  2537px 1741px;

}

.harpy{
  top: 150px;
  position: absolute;
  width:134px;
  height:78px;
  background-image: url("artgif.gif");
  background-position:  0px -1281px;
  background-size:  2537px 1741px;
}

#harpy1{
  top: 500px;
  left: 1000px;
}

#harpy2{
  top: 150px;
  left: 1700px;
}

#harpy3{
  top: 100px;
  left: 2220px;
}

#harpy4{
  top: 450px;
  left: 2820px;
}

#harpy5{
  top: 470px;
  left: 3320px;
}
#harpy6{
  top: 70px;
  left: 2620px;
}

#harpy7{
  top: 70px;
  left: 3920px;
}

#harpy8{
  top: 470px;
  left: 4420px;
}

#harpy9{
  top: 100px;
  left: 4820px;
}

#harpy10{
  top: 500px;
  left: 5220px;
}

#harpy11{
  top: 155px;
  left: 5620px;
}

#harpy12{
  top: 555px;
  left: 6220px;
}

#harpy13{
  top: 155px;
  left: 6620px;
}

#harpy14{
  top: 555px;
  left: 7020px;
}

#harpy15{
  top: 455px;
  left: 7520px;
}

#harpy16{
  top: 75px;
  left: 7920px;
}

#harpy17{
  top: 475px;
  left: 8320px;
}

#harpy18{
  top: 175px;
  left: 9100px;
}

#harpy19{
  top: 195px;
  left: 11100px;
}

#harpy20{
  top: 115px;
  left: 11800px;
}

#harpy21{
  top: 485px;
  left: 12500px;
}

#harpy22{
  top: 120px;
  left: 13000px;
}

#harpy23{
  top: 420px;
  left: 13600px;
}

#harpy24{
  top: 390px;
  left: 14000px;
}

#harpy25{
  top: 500px;
  left: 14500px;
}

#harpy26{
  top: 80px;
  left: 14500px;
}