html,
body {
  margin: 0;
  padding: 0;
background-color: rgb(0, 0, 0);

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


}



#megacontainer { 
  background-color: rgb(39, 15, 0);
 position: relative;
   width: 800px;
    height:  800px;
  overflow: hidden; 
  }

#container{
position: relative;
 width: 800px;
  height:  800px;
overflow: hidden;
background-repeat: no-repeat;
}



#arbol{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -3200px;
 background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.1);

}

#tantalus{
  transform: scale(1.2);
  position: absolute;
  width: 800px;
  height:  800px; 
  }

#tantalusbrazo{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -1600px;
 background-repeat: no-repeat;
  background-size: cover
  
}

#tantaluscuerpo{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: 0px;
 background-repeat: no-repeat;
  background-size: cover
  
}

#tantaluscabeza{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -800px;
 background-repeat: no-repeat;
  background-size: cover
}


#olas{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -2400px;
  background-size: cover; 
  background-repeat: no-repeat;  
  animation-name: olasanima;
  animation-duration: 2s;
  animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes olasanima{
  0%   {transform: skew(0, 0deg) scaleX(1.2) ;}
  45%  {transform: skew(0,  4deg) scaleX(1.5);}

  100%  {transform: skew(0, 0deg) scaleX(1.2);} 

}

#olas2{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -2400px;
  background-size: cover; 
  background-repeat: no-repeat;  
  animation-name: olasanima2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes olasanima2{
  0%   {transform: skew(0, -1deg) scaleX(-1.1);}
  55%  {transform: skew(-1deg,  -6deg) scaleX(-1.5);}
  100%  {transform: skew(0, -1deg) scaleX(-1.1);} 
}

#olas3{
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -2400px;
  background-size: cover; 
  background-repeat: no-repeat;  
  animation-name: olasanima3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes olasanima3{
  0%   {transform: skew(0, -1deg) scaleX(-1.1);}
  55%  {transform: skew(-1deg,  6deg) scaleX(-1.5);}
  100%  {transform: skew(0, -1deg) scaleX(-1.1);} 
}



#ramaunica{transform: scale(1.2);
  position: absolute;
  width: 800px;
  height: 800px;
  background-image: url("art.png");
  background-position-x: -4000px;
  background-size: cover;
  background-repeat: no-repeat;  
  
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes ramaunicaanima{
  0%   {top: -70px;}
  25%  {top: -90px;}
  55%  {top: -50px;}
  100%  {top: -70px;}
}

#ramauno{transform: scale(1.1);
  
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -5600px;
  background-size: cover;
  background-repeat: no-repeat;  
  top: -70px;
  animation-name: ramaunoanima;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes ramaunoanima{
  0%   {top: -70px;}
  25%  {top: -50px;}
  100%  {top: -70px;}
}

#ramados{transform: scale(1.1);
  position: absolute;
  width: 800px;
  height:  800px;
  background-image: url("art.png");
  background-position-x: -4800px;
  background-size: cover;
  background-repeat: no-repeat;  
  top: -40px;
  animation-name: ramadosanima;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes ramadosanima{
  0%   {top: -40px;}
  55%  {top: -60px;}
  100%   {top: -40px;}
}


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

 
}