.btn {
    color: white;

    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 18px;
    
    border: none;
    border-bottom: solid 4px white;
    border-right: solid 4px white;
    border-radius: 10px;

    padding: 15px 25px;

    cursor: pointer;
}


.btn-verde {
    background: linear-gradient(45deg, var(--primary-color), #0F9378);
    border-bottom-color: #00896E;
    border-right-color: #00896E;
}

.btn-verde:hover {
    background: linear-gradient(45deg, #19d6b0, #15a789);
    border-bottom-color: #00ac89;
    border-right-color: #00ac89;
}

.btn-verde:active {
    background: linear-gradient(45deg, #21f0c6, #1cc4a2);
    border-bottom-color: #00caa2;
    border-right-color: #00caa2;
}


.btn-roxo {
    background: linear-gradient(45deg, var(--secondary-color), #16043D);
    border-bottom-color: #3A0CA3;
    border-right-color: #3A0CA3;
}

.btn-roxo:hover {
    background: linear-gradient(45deg, #4812c5, #21075a);
    border-bottom-color: #4610c5;
    border-right-color: #4610c5;
}

.btn-roxo:active {
    background: linear-gradient(45deg, #5518e4, #2e0b79);
    border-bottom-color: #5213e4;
    border-right-color: #5213e4;
}