html { height: 100%;}
body {
    display: flex;
    height: 100%;
    background-color: black;
    color: white;
    }

.contenedor {
    margin: auto;
    margin-top: auto;

}


/*------------------------------------------------------------------------*/
/*imagenes*/

#parent {
  position:relative;
}

.escenario img{
  width:100%;
  max-width: 80vw;
  max-height: 500px;
}

.animacion img{
  width:100%;
  max-width: 80vw;
  max-height: 500px;
  position: absolute;
  top: 0px;
  left:0px;

  -webkit-tap-highlight-color: transparent;
 
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

.animacion-leve img{
  width:100%;
  max-width: 80vw;
  max-height: 500px;
  position: absolute;
  top: 0px;

  -webkit-tap-highlight-color: transparent;
 
  animation: shake2 3.5s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
}

/* animacion imagen */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake2 {
  0% { transform:translate(1px, 1px) rotate(0deg);}
  1.9% { transform:translate(-1px, -2px) rotate(-1deg); }
  3.7% { transform:translate(-3px, 0px) rotate(1deg);}
  5.9% { transform:translate(3px, 2px) rotate(0deg);}
  7.5% { transform: translate(1px, -1px) rotate(1deg); }
  8.1% { transform:translate(-1px, 2px) rotate(-1deg); }
  10.43% { transform:translate(-0px, 0px) rotate(0deg); }
  100% { transform:translate(0,0) }
}

/*------------------------------------------------------------------------------*/

  /*link area clickeable*/
  #click {
    background-color: rgba(255, 255, 255, 0);
   

    width:100%;
    max-width: 80vw;
    max-height: 500px;
    position: absolute;
    top: -16px;
    left:-40px;

  }
  #click2 {
    background-color: rgba(255, 255, 255, 0);
   
    
    width:100%;
    max-width: 80vw;
    max-height: 500px;
    position: absolute;
    top: -16px;
    left:-40px;

  }

  #click3 {
    background-color: rgba(255, 255, 255, 0);
   

    width:100%;
    max-width: 80vw;
    max-height: 500px;
    position: absolute;
    top: -16px;
    left:-40px;

  }
/*------------------------------------------------------------------------------*/

/*texto*/
.texto, .texto2{
text-align: center;
margin:5%;
font-size: 0.8em;
}

.texto h1{
  color: #fff;
  font-family:Arial, Helvetica, sans-serif

}

.texto p {
    color: #fff;
    font-family: monospace;
    overflow: hidden; 
    width:0%;
    
    white-space: nowrap; 
    margin: 0 auto;
    letter-spacing: .10em;
    animation: 
    forwards
      typing 3.5s steps(30, end),
      blink-caret .5s step-end infinite;
      animation-delay:5s;
  }

  .texto2 p {
    color: #fff;
    font-family: monospace;
    overflow: hidden; 
    width:0%;
    
    white-space: nowrap; 
    margin: 0 auto;
    letter-spacing: .01em;
    animation: 
    forwards
      typing 3.5s steps(30, end),
      blink-caret .5s step-end infinite;
      animation-delay:8.5s;
  }



/*animacion texto*/
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }