.ui-button{
    // background-color: var(--tertiary-color);
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    color: black;
    cursor: pointer;
    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.2);
    margin:auto;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

// .ui-button:hover{
//     background-color: #9e6a50;
//     box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.4);
// }

.primary{
    background-color: var(--primary-color);
}

.primary:hover{
    background-color: var(--primary-color-dark);
}

.secondary{
    background-color: var(--secondary-color);
}

.secondary:hover{
    background-color: var(--secondary-color-dark);
}

.tertiary{
    background-color: var(--tertiary-color);
}

.tertiary:hover{
    background-color: var(--tertiary-color-dark);
}

.quaternary{
    background-color: var(--quaternary-color);
}

.quaternary:hover{
    background-color: var(--quaternary-color-dark);
}

.small{
    width: 20%;
}

.medium{
    width: 40%;
}

.large{
    width: 60%
}

.xlarge{
    width: 80%;
}