.character-card img {
    transition: transform 0.3s; /* Add a smooth transition effect */
}

.character-card img:hover {
    transform: scale(1.1); /* Increase the image size on hover */
}
/* CSS for positioning name and description at the bottom left of the card and making the text bold */
.card {
    position: relative;
    border-radius: 20px; /* Add rounded corners to the entire card */
}

/* CSS for character card images */
.card-img-top {
    width: 100%; /* Ensure the image width spans the card */
    max-height: 100%; /* Limit the maximum height to maintain aspect ratio */
    object-fit: cover; /* Crop and center the image within the card */
    border-radius: 20px 20px 0 0; /* Round only the top corners of the image */
}

.card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center; /* Center the text horizontally */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3); /* Background color for the name and description */
    color: white; /* Text color for the name and description */
    border-radius: 20px; /* Round only the bottom corners */
}

.card-title {
    font-weight: bold; /* Make the text bold */
}
/* CSS for styling the buttons */
.filter-button {
    border-radius: 15px; /* Add more rounded corners */
    margin: 3px; /* Increase spacing between buttons */
    font-weight: bold; /* Make the text inside the buttons bold */
    transition: background-color 0.3s ease-in-out; /* Add a smooth transition effect for background color */
    background-color: #DE3163; /* Set the background color to pink */
    outline: none; /* Remove the blue outline */


}

.filter-button.active {
    background-color: 	#DE3163; /* Change the background color for the selected button to make it brighter pink */
    color: white; /* Text color for the selected button */
    outline: none; /* Remove the blue outline */

}
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 10px; /* Adjust margin as needed */
}
/* CSS for positioning the message icon and making it zoom on hover */


.message-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px; /* Adjust the initial size of the icon as needed */
    height: 50px;
    transition: transform 0.3s, opacity 0.3s; /* Add a smooth transition for zoom and opacity */
}

.character-card:hover .message-icon {
    opacity: 1; /* Increase opacity on hover */
    transform: scale(1.2); /* Zoom in the icon on hover */
}
.card-container {
            height: 150px; /* Set the desired fixed height for all passages */
            margin-bottom: 20px; /* Adjust the gap between passages */
            background-color: black; /* Set the background color to black */
            border-radius: 10px; /* Make corners more rounded */
            border: 2px solid #e4007f; /* Set the outline color to a bright pink */
            transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Smoother transition */
        }
        .card-container:hover {
            transform: scale(1.05); /* Increase the size on hover */
            border-color: #ff007f; /* Use a very vibrant shade of pink for the outline on hover */
            color: #ddd; /* Change text color to a darker shade of white or light grey on hover */
        }
        .card-body {
            padding: 10px; /* Adjust the padding to make passages smaller */
        }
        .card-title {
            font-size: 1.1rem; /* Set a slightly bigger font size for titles */
            color: white; /* Set the title text color to white */
        }
        .card-text {
            color: #ddd; /* Set the text color to a darker shade of white or light grey */
        }
        .page-title {
            margin-bottom: 30px; /* Adjust the margin to create a bigger gap */
        }