.card {
    border: 0px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    transition: filter 0.3s ease;
}
.fill-light {
    fill: lightgray;
    color: aliceblue;
    filter: invert(86%) sepia(3%) saturate(0%) hue-rotate(192deg) brightness(94%) contrast(89%);
    transition: filter 0.3s ease;
}
.card:hover .fill-light {
    filter: invert(29%) sepia(96%) saturate(658%) hue-rotate(176deg) brightness(94%) contrast(89%);
}
.img-sm {
    height: 50px;
    
}
.card-title {
    text-align: center;
}


.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0; 
}

.theme-blue {
    color:#4594ca;
}