*{
     margin: 0px;
     padding: 0px
}
html{
     background-image: url('../imagenes/background.jpg');
     background-size: 100vw 100vh;   
}
body{
     font-family: arial;  
     color: white;
}
#reproductor{
     width: 60%;
     min-width: 400px;
     max-width: 1400px;
     background-color: white;
     margin: 60px auto 60px auto;
     padding: 2% 2% 18% 2%;
     position: relative;
     transform: rotateX(-20deg) rotateZ(-10deg);
     border: solid 1px black;
     box-shadow: 5px 5px 5px rgba(60,60,60,0.6);
}
#reproductor video{
     width: 100%;
     height: 70%;
}
#reproductor h1{
     position: absolute;
     top: 5%;
     width: 100%;
     text-align: center;
     font-variant: small-caps;  
     text-shadow: 2px 2px 2px rgba(60,60,60,0.9);
}
#controls{
     position: absolute;
     bottom:5%;
     width: 94%;
     left: 3%;  
     background-color: rgba(255,0,0,0.7);
     padding: 10px 0px;
     border-radius: 5px;
     text-align: center;
}
#controls input[type="range"]{
     width: 100px;
     display: inline;
}
#controls img{
     height: 50px;
     width: 50px;
     vertical-align: middle;
}
section{
     width: 60%;
     background-color: rgba(100,60,60,0.8);
     padding: 20px;
     margin: auto;
     text-align: justify;
}