.bookList {
    list-style: none; /* Remove default list styling */
    display: flex; /* Use flexbox for book list */
    padding: 10px; /* Remove default padding */
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Center items vertically */
    flex-wrap: wrap; /* Allow books to wrap to the next line */
    overflow: hidden; /* Add vertical scroll if needed */
}

.loading {
    text-align: center; /* Center text */
    font-size: 20px; /* Large font size */
    margin-top: 20px; /* Add spacing between book list and loading text */
}

.bookContainer {
    display: flex; /* Use flexbox for book container */
    flex-direction: column; /* Arrange book items vertically */ 
    width: 300px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    padding: 30px; /* Add padding to book container */
}

.bookItem {
    display: flex; /* Use flexbox for book item */
    flex-direction: column; /* Arrange book cover and text vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
    padding: 10px; /* Add padding to book item */
}

.bookCover {
    width: 150px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Add rounded corners to the image */
    /* margin-right: 20px; */
    margin-bottom: 10px; /* Add spacing between book cover and text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
}

.bookInfo {
    margin-top: 10px; /* Add spacing between book cover and text */
    font-size: 16px;

}

.manageContainer {
    display: flex; /* Use flexbox for manage container */
    flex-direction: column; /* Arrange buttons vertically */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    margin-top: 25px; /* Add spacing between book list and manage container */
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Class to trigger the fade-in animation */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Media Queries for Responsive Design */
@media (max-width: 780px) {
    .bookInfo {
        padding: 0;
        width: 80%;
    }

    .bookCover {
        width: 80px;
    }

    .bookInfo {
        font-size: 12px;
    }
}