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

body {
    font-family: 'Poppins', sans-serif;
    background: #EAD7F1; /* Soft warm purple */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

/* Header and Title Styling */
header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 60px; /* Added more space above the title */
}

.interactive-title {
    font-family: 'Great Vibes', cursive; /* Cursive font */
    font-size: 3rem;
    color: #5a67d8; /* Adjust to complement the background */
    font-weight: bold;
    letter-spacing: 3px;
}

.subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem; /* Reduced the subtitle font size */
    color: #5a67d8;
    margin-top: 10px;
}

/* Intro Section Styling */
.intro {
    font-size: 1rem; /* Reduced the intro text size */
    color: #4a5568;
    text-align: center;
    max-width: 1100px; /* Increased width for larger screens */
    margin-bottom: 40px;
}

.intro p {
    margin-bottom: 15px;
}

/* Book Container and Box Styling */
.book-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.book {
    display: flex;
    align-items: flex-start;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 1100px; /* Increased maximum width for larger content */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}

.book:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

/* Book Cover Styling */
.book-cover {
    width: 200px; /* Larger book cover */
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    margin-right: 20px;
}

/* Book Details Styling */
.book-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: justify; /* Justify text for neat alignment */
}

.book-details h2 {
    margin-bottom: 10px;
    font-size: 1.8rem;
    color: #2d3748;
}

.book-details p {
    margin-bottom: 10px;
    color: #4a5568;
    font-size: 1rem;
}

.price {
    font-weight: bold;
    color: #48bb78;
    margin-top: 10px; /* Add space above the price */
}

/* Link Button Styling */
.button {
    display: inline-block;
    background: #EAD7F1; /* Same colour as the background */
    color: #5a67d8;
    border: 2px solid #5a67d8;
    padding: 8px 16px; /* Reduced button size */
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem; /* Smaller font size for mobile */
    text-decoration: none; /* Remove underline from link */
    transition: background 0.3s ease, color 0.3s ease;
    align-self: flex-start;
}

.button:hover {
    background: #5a67d8;
    color: white;
}

/* Mobile Responsive Breakpoints */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    header {
        margin-top: 40px; /* Adjusted space for mobile */
    }

    .book {
        flex-direction: column; /* Stack elements for mobile view */
        align-items: center; /* Center items for mobile */
    }

    .book-cover {
        width: 80%; /* Make book cover larger and centred on mobile */
        max-width: 250px; /* Limit maximum width on smaller screens */
        margin-bottom: 15px;
    }

    .book-details {
        align-items: center; /* Center-align book details */
        text-align: center; /* Ensure text is centered on mobile */
    }

    .book-details h2 {
        font-size: 1.4rem; /* Smaller heading size for mobile */
    }

    .book-details p {
        font-size: 0.9rem; /* Smaller text size for better readability */
    }

    .button {
        align-self: center; /* Center button on mobile */
        width: auto; /* Adjust button width for mobile */
        text-align: center;
    }
}

/* Tablet View Styling */
@media (min-width: 769px) and (max-width: 1024px) {
    .book {
        flex-direction: row; /* Keep desktop orientation for tablets */
        align-items: flex-start;
    }

    .book-cover {
        width: 180px; /* Maintain consistent size for tablet view */
        height: auto;
    }

    .book-details {
        text-align: justify; /* Justify text for tablet view */
    }
}

/* Footer and Social Media Icons */
footer {
    margin-top: 20px; /* Reduced the space between the last box and the footer */
    text-align: center;
    padding: 20px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons a {
    color: #5a67d8; /* Adjust the icon color to match your theme */
    font-size: 1.8rem;
    margin: 0 15px; /* Use margin to create space between icons */
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #f89aa2; /* Adjust the hover color to match your theme */
}