@import url('index.css');

/*
 * ========================================
 * 1. CARDS
 * ========================================
 */

.person-card {
  border: 4px solid transparent;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.person-card:hover {
    border-color: var(--mint);
    transform: 
        translateY(-4px);
}

.cards-container .bi{
    transition: color 0.4s ease;
}

.cards-container .bi:hover {
    color: var(--mint);
}

#cardIona {
    background-color: var(--mint);
}

#cardIona:hover {
    border-color: var(--white);
}

#cardIona .bi:hover {
    color: var(--white);
}

 #students-container {
    padding: 15rem 0 15rem 0; 
 }

/*
 * ========================================
 * 2. CENTRO DE PESQUISA
 * ========================================
 */

#location-link {
    color: #8f8f8f;
}

#location-link:hover {
    color: var(--mint);
}

/*
 * ========================================
 * 3. MIDIAS SOCIAIS
 * ========================================
 */

.btn-primary {
    background-color: var(--mint);
    color: var(--bs-body-color);
    border-color: var(--mint);
    border-width: 2px;
    padding: 0.75rem 0.2rem;
    font-size: 1.2rem;
    transition:
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-primary:hover {
    background-color: var(--white);
    border-color: var(--mint);
    color: var(--black);
    transform: 
        translateY(-4px);
}

.no-wrap {
    white-space: nowrap;
}