html{background-image: url("imagenes/Loto.png");
    background-position: center;
    background-size: cover;
    height: 100%
    }
body{width: 80%; margin: auto}
*{}
.cuerpo{width: inherit; height: 80%;position: absolute}
.cuerpo-blanco{width: inherit; height: 80%; background-color: white; position: absolute}
#oculto{display: none;}
.enlaces{background-color: black; margin: auto}
.enlaces ul {list-style-type: none}
.enlaces ul li { display: inline-block;}
.enlaces a{padding: 10px; display: inline-block; text-decoration: none; color: white}
.enlaces a:hover{background-color: gainsboro}
.centrado{width: 50%; height: 50%; margin: auto;}
.centrado table {margin: auto}
.centrado table td{text-align: center; padding: 5px 20px}
.centrar {position: relative; margin: auto; width: 90%}
.vineta{width: 100%; height: 500px}
#retroceder, #avanzar{width: 50px; text-align: center; padding: 5px}
#retroceder{float: left}
#avanzar{float: right}
.perfil{float: left; margin: 10px;width:200px; height:250px;}
p{font-size: 20px}
.nombre{font-size: 30px}
.ficha{position: absolute; width: 75%; height: 90%}
.boton{color: white; opacity: 0.5; background-color: black; border: none}
.boton:hover{box-shadow: 0px 0px 20px #0000ff}
#adelante{position: absolute; top: 50%; right: 0}
#atras{position: absolute; top: 50%; left: 0}
.heroes{width: 36%;position: absolute; height: 88%}
.heroes img{width: 100%; height: inherit}
.villanos{width:30%;float: right; height: 88%; margin: 2px}
.villanos img{width: 100%; height: inherit}
.texto{text-align: center}
.imagen{width:100%;height: 100%; opacity: 0.5}
#visible{position: absolute; width: 80%; margin: auto; height: 100%; text-align: center}
.binicio{width: 250px; height: 250px; opacity: 0.7; position: absolute; top: 50%; border-radius: 500px;}
#oculto{position: absolute; width: inherit; top: 25%;margin: auto;}
#oculto a{padding: 10px; text-decoration: none}
#oculto a:hover{color: white; background-color: gainsboro}