*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Arial,sans-serif;
background:#eef2f7;

}

header{

background:linear-gradient(
135deg,
#6a11cb,
#2575fc
);

padding:40px;

color:white;

text-align:center;

}

.biblioteca{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(
300px,
1fr
)
);

gap:30px;

padding:30px;

}

.card{

background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.1);
transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}


.card:hover{

transform:
translateY(-10px);

}



.card h2{

padding:15px;

}

.card p{

padding:0 15px;

color:#666;

}

.card a{

display:block;

margin:15px;

padding:12px;

text-align:center;

text-decoration:none;

background:#2575fc;

color:white;

border-radius:10px;

}

.contenedor{

display:flex;

}

aside{

width:250px;

padding:20px;

background:white;

}

aside a{

display:block;

padding:12px;

background:#2575fc;

margin-bottom:10px;

color:white;

text-decoration:none;

border-radius:10px;

}

main{

flex:1;

padding:30px;

margin:20px;

background:white;

border-radius:20px;

}

.botones{

display:flex;

justify-content:space-between;

margin-top:30px;

}

.botones a{

padding:12px 20px;

background:#2575fc;

color:white;

text-decoration:none;

border-radius:10px;

}

@media(max-width:768px){

.contenedor{

flex-direction:column;

}

aside{

width:100%;

}

}
img{
            width:100%;
            max-width:350px;
            display:block;
            margin:20px auto;
            border-radius:15px;
            box-shadow:0 4px 10px rgba(0,0,0,0.2);
        }
footer{
            text-align:center;
            padding:20px;
            color:#777;
            margin-top:30px;
        }

        .volverInicio{

display:inline-block;
margin-top:15px;
padding:12px 25px;
background:#2575fc;
color:#fff;
text-decoration:none;
border-radius:10px;
font-weight:bold;
transition:.3s;

}

.volverInicio:hover{

background:#6a11cb;
transform:scale(1.05);

}