.card {
    display:flex;
    flex-direction: column;

    background-color: var(--bg-card);
    border:var(--border-card);
    border-radius: 6px;
    box-shadow: var(--shadow-depth);
    overflow:hidden;

    opacity: 1;
    transform:translateY(0);
    transition: all .3s linear;

}

.card > .header{
    background: var(--accent-color);
    padding:.5rem 1rem;
    color:white;
    font-size:1.2rem;
}

.card > .content{
    display:flex;
    flex-direction: column;
    padding:1rem;
    gap:1rem;
}

.card .button-group{
    display:flex;
    flex-direction: row;
    gap:1rem;
    justify-content: center;
}




.exitDown{
    opacity: 0;
    transform: translateY(20px); /* Slides down as it fades */
}