/* buttons.css */
.mybtn-root {
    --verde-primario: #2ecc71;
    --verde-oscuro:   #27ae60;
    --verde-chiaro:   #a8e6cf;
	/* centrare il contenuto */
    display: flex;               /* abilita flexbox */
    justify-content: center;     /* allinea orizzontalmente al centro */
    box-sizing: border-box;
}

/* tutti i selettori usano il prefisso */
.mybtn-group {
    display: flex;
    gap: 1rem;
}

.mybtn {
    padding: .75rem 1.5rem;
    border: none;
    border-radius: 4px;
    background-color: var(--verde-primario);
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
}

.mybtn:hover {
    background-color: var(--verde-oscuro);
}

.mybtn:active {
    transform: scale(.97);
}

/* variante chiara */
.mybtn.light {
    background-color: var(--verde-chiaro);
    color: #2c3e50;
}

.mybtn.light:hover {
    background-color: #90d5a9;
}