body {
    background-color: #ffe6e6;
    /* Light pink color */
    margin: 0;
    /* Remove default margin */
    padding: 20px;
    /* Optional: Add some padding around the content */
    text-align: center;
}

/* Header Styling */
.site-header {
    background-color: #e8173a;
    /* Deep red background */
    color: white;
    padding: 20px;
}

.site-header h1 {
    margin: 0;
    font-size: 2.5em;
}

.site-header p {
    margin-top: 10px;
    font-size: 1.2em;
}

/* Kindle Unlimited Banner Styling for Romance Page */
.ku-banner-romance {
    background-color: #e8173a;
    /* Match the red color of the header */
    color: white;
    /* White text color for contrast */
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 800px;
    /* Adjust the width as needed */
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.ku-banner-romance a {
    text-decoration: none;
    color: inherit;
    /* Inherits the white color */
    font-family: 'Verdana', sans-serif;
    display: block;
}

.ku-banner-romance p {
    margin: 0;
    font-size: 1.2em;
}

.ku-banner-romance .cta-link {
    color: #ffcc00;
    /* Yellow color to highlight the CTA */
    font-weight: bold;
    text-decoration: underline;
}

/* Hover effect for the banner */
.ku-banner-romance:hover {
    background-color: #bf1431;
    /* Darker red on hover */
}

.ku-banner-romance a:hover .cta-link {
    color: #ffd700;
    /* Lighter yellow on hover */
}


/* Warning Box Styling */
.warning-box {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin: 40px auto 20px auto;
    max-width: 800px;
    /* Adjust the width as needed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.warning-box p {
    font-family: 'Verdana', sans-serif;
    font-size: 16px;
    color: #cc0000;
    /* Same color as the "Vampire Romance" text */
    margin: 0;
}

/* Pagination Controls Styling */
.pagination {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin: 40px auto 20px auto;
    max-width: 800px;
    /* Adjust the width as needed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.pagination p {
    font-family: 'Verdana', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #cc0000;
    /* Same color as the "Vampire Romance" text */
    margin: 0;
}


/* Center the container horizontally */
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    /* Optional: Adds some space between images */
    margin-bottom: 20px;
}

.book-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 220px;
    /* Fixed width */
    height: 400px;
    /* Fixed height to match the first container */
}

.book-item img {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    max-height: 300px;
    /* Ensure images do not exceed a specific height */
    object-fit: contain;
    /* Fit the image within the container without distortion */
}

.book-item a {
    display: block;
    /* Makes the <a> tag behave like a block element */
    text-decoration: none;
    /* Removes underline from text */
    color: inherit;
    /* Ensures the text inside <a> inherits color from the parent */
}

.book-item p {
    margin-top: 5px;
    margin-bottom: 0;
    word-wrap: break-word;
    font-family: 'Verdana', serif;
    font-size: 16px;
    font-weight: bold;
    color: #cc0000;
}


.book-genre {
    font-family: 'Verdana', serif;
    font-size: 20px;
    /* Same size as the author */
    color: #cc0000;
    /* Different color to highlight the genre */
    /* margin-top: 5px; */
    /* Small space above the genre */
}

/* Footer Styling */
.site-footer {
    background-color: #333;
    color: white;
    padding: 10px;
}

.site-footer p {
    margin: 0;
}

/* Adjust for mobile screens */
@media (max-width: 480px) {
    .book-item {
        flex: 0 1 calc(50% - 20px);
        /* Two items per row with some gap */
        max-width: calc(50% - 20px);
        /* Ensures each item takes up half the width minus the gap */
    }

    .image-container {
        gap: 10px;
        /* Smaller gap on mobile */
    }
}