/* friends - dark-theme compatible */

#friends h3 {
    color: var(--text-secondary-color);
}

#friends a {
    text-decoration: none;
    color: var(--text-link-color);
}

#friends .badge {
    background-color: var(--badge-background-color, #333);
    color: var(--text-color);
    margin: 0 1%;
}

#friends .card {
    background-color: var(--secondary-color, #1e1e1e) !important;
    color: var(--text-color, #e0e0e0) !important;
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
    min-height: 400px;
    overflow: hidden;
    border-radius: 1rem;
    border: none;
}

#friends .card-body,
#friends .card-title,
#friends .card-text {
    color: var(--text-color, #e0e0e0) !important;
}

#friends .card-title {
    font-weight: 600;
}

#friends .card-text {
    color: var(--text-secondary-color);
}

#friends .row {
    justify-content: center;
}

#friends .card:hover {
    box-shadow: 0 0 11px rgba(15, 80, 100, 0.2);
    transition: transform 0.3s;
    transform: translateY(-7px);
}

#friends .card .card-head {
    object-fit: cover;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

#friends .card-img-top {
    transition: transform 0.3s;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    width: 100%;
    height: auto;
}

#friends .card:hover .card-img-top {
    transform: scale(1.2);
    transition: all 0.3s ease-out;
}

#friends .card .card-footer {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

#friends .float-end .btn {
    transition: none;
    border-radius: 0.5rem;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#friends .float-end .btn:focus {
    box-shadow: none;
}