body {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.card {
    background-color: #ffffff; /* Ensures the card background is white */
    color: #212529; /* Sets the text color to a darker shade for readability */
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #ffffff;
    }

    header, footer, .card {
        background-color: #1c1c1c; /* Dark mode background for header, footer, and cards */
        color: #ffffff; /* Ensures text on dark background is white for readability */
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #f8f9fa;
        color: #212529;
    }

    header, footer, .card {
        background-color: #e9ecef; /* Light mode background for header, footer, and cards */
        color: #212529; /* Dark text color for light backgrounds */
    }
}