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;
     animation: 0.5s linear 0s 1 running myFrameDash;
 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;
     animation: 0.5s linear 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;
     animation: 0.5s linear 0s 1 running myFrameDash;
 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%;
}


img:hover{
    color:rgb(255, 255, 255);
    box-shadow: 8px 7px 7px rgb(243, 163, 26);
}
img:active{
    color: rgb(255, 255, 255);
    box-shadow: 8px 7px 7px rgb(13, 209, 65);
}


@keyframes myFrameDash{
    from{transform: translateX(300px); opacity: 0;}
    to{transform: translateX(0); opacity: 1;}
}