body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.banner {
    background-color: #000;
    color: #fff;
    padding: 1em;
    text-align: center;
}

.banner h1 {
    margin: 0;
    padding-bottom: 0.5em;
}

.banner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.banner li {
    display: inline-block;
    margin-right: 20px;
}

.banner a {
    color: #fff;
    text-decoration: none;
}

.banner a:hover {
    text-decoration: underline;
}

main {
    padding: 2em;
    text-align: center;
}


.book-link {
    display: inline-block;
    border: 2px solid #000; /* Black border */
    border-radius: 10px; /* Slightly larger radius to match image */
    padding: 5px; /* Add some space between border and image */
    transition: background-color 0.2s ease-in-out;
}

.book-link:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
    cursor: pointer;
}

.book-link img {
    border-radius: 6px; /* Adjust image radius to fit within border */
}


.image-link {
    display: inline-block;
    border: 2px solid #000; /* Black border */
    border-radius: 10px; /* Slightly larger radius to match image */
    padding: 5px; /* Add some space between border and image */
}

.image-link img {
    border-radius: 6px; /* Adjust image radius to fit within border */
}

.image-link:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
    cursor: pointer;
}



footer {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 20px;
    text-align: center;
}

.social-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.social-links li {
    margin-right: 20px;
}

.social-links a {
    color: #fff; /* White text */
    text-decoration: none;
}

.social-links a:hover {
    color: #ccc; /* Light gray on hover */
}
 


}