@import url('https://fonts.googleapis.com/css2?family=Ancizar+Serif:ital,wght@0,300..900;1,300..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-weight: 400;
}

:root{
    --branco: #3b3355;
    --branco1: #8a8489;
    --branco2: #0c4430 ;
    --branco3: #5d5d81;
    --branco4: #bfcde0 ;
    --branco5: #000505;
    --font-titulo: "Roboto Condensed", sans-serif;
    --font-texto: "Ancizar Serif", serif;
}

body{
    background-color: var(--branco5);
    color: var(--branco3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: var(--font-texto);
}

.caixa-principal{
    background-color: var(--branco);
    width: 40%;
    text-align: center;
    padding: 20px;
    border:solid 2px var(--branco4);
}

.titulo{
    font-family: var(--font-titulo);
}

button{
    background-color: var(--branco3);
    color: var(--branco4);
    border: solid 2px var(--branco4);
    padding: 15px;
    margin: 10px auto;
    transition: 0.3s;
}

button:hover{
    background-color: var(--branco1);
}

main{
    align-items: center;
    display: flex;
    justify-content: center;
}