img{
    margin: 0 auto;
     border-radius: 4px;
     border-width: 5px;
     padding: 4px;
     background: linear-gradient(to right, rgb(187, 0, 255), rgb(0, 0, 0));
     border-color: black;
    height: auto;
    width: 55%;
    max-width: 600px;
    /* animacion: */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
    /* interaccion: */
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
 position:relative
}

#libroInicio{
     border-radius: 4px;
     border-width: 5px;
     padding: 4px;
     background: linear-gradient(to right, rgb(187, 0, 255), rgb(0, 0, 0));
     border-color: black;
    height: auto;
    width: 55%;
    max-width: 600px;
    /* animacion: */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}
video{
     margin: 0 auto;
     border-radius: 4px;
     border-width: 5px;
     border-style: solid;
     padding: 4px;
     background: linear-gradient(to right, red, rgb(0, 0, 0));
     border-color: black;
    height: auto;
    width: 80%;
    max-width: 600px;
    /* animacion: */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
    /* interaccion: */
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
 display:block;
 position:relative
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 8px;
    background: linear-gradient(to right, red, black);
    border: 3px solid;
}

.video-ajustable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* interaccion: */
img:hover{
    color:rgb(255, 255, 255);
    box-shadow: 0px 12px 24px rgba(243, 163, 26, 0.5);
    transform: scale(1.04);
}
img:active{
    color: rgb(255, 255, 255);
    box-shadow: 0px 4px 10px rgba(13, 209, 65, 0.5);
    transform: scale(0.98);
}

/* interaccion: */
video:hover{
    box-shadow: 0px 12px 24px rgba(243, 163, 26, 0.5);
    transform: scale(1.02);
}
video:active{
    box-shadow: 0px 4px 10px rgba(13, 209, 65, 0.5);
    transform: scale(0.99);
}

/* animacion: */
@keyframes myFrameDash{
    from{
        transform: translate3d(200px, 0, 0); 
        opacity: 0;
    }
    to{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}