:root {
    
    --cor-principal-1: #3250A8;
    --cor-principal-1-sombra: rgba(50, 80,168, .92);
    --cor-principal-1-triadic-2: #A83250;
    --cor-principal-1-triadic-3: #50A832;
    --cor-principal-2: #2DA24A;
    --cor-principal-2-sombra: rgba(45, 162, 74, .92);
    --cor-principal-2-dark: rgb(25, 142, 54); 

    --cor-secundaria-1: #315E98;
    --cor-secundaria-2: #306B89;
    --cor-secundaria-3: #307979;
    --cor-secundaria-4: #2F8769;
    --cor-secundaria-5: #2E945A;

    --branco-1: #eaeaea;
    --branco-1-contraste: #dadada;

    --sombra-1: rgba(0, 0, 0, 0.1);
    --sombra-2: rgba(0, 0, 0, 0.5);

}

html, body{

    min-height: 100%;
    height: 100%;
    font-family: "Montserrat", "Hoglar", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Montserrat", "Hoglar", serif;
    font-optical-sizing: auto;
    
    font-style: normal;
}



.botao-azul,
.botao-verde,
.botao-vermelho {
    padding: 8px;
    margin: 8px 0px;
    border-radius: 5px;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
}

/* Talvez usar uma animação melhor no hover dos botoes */
.botao-azul:hover,
.botao-verde:hover,
.botao-vermelho:hover {
    opacity: 0.8;
    text-decoration: none;
}

.botao-azul {
    background-color: var(--cor-principal-1);
}

.botao-verde {
    background-color: var(--cor-principal-2);
}

.botao-vermelho {
    background-color: #dc3545;
}