body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: var(--navbar-text) !important;
}

.card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--card-border);
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

@media (min-width: 768px) {
    .card {
        display: flex;
        flex-direction: column;
    }

    .card-body {
        flex-grow: 1;
    }

    .card-img-top {
        width: 100%;
        aspect-ratio: 1/1;
        /* Maintain square aspect ratio */
        object-fit: contain;
        /* Maintain aspect ratio */
        background-color: rgb(0, 0, 0);
    }
}

@media (max-width: 767px) {
    .card-img-top {
        height: 250px;
        /* Adjust the height as needed */
        object-fit: contain;
        /* Maintain aspect ratio */
        background-color: rgb(0, 0, 0);
    }
}