:root {
    --fundo-azul: #0b054f;
    --fundo-amarelo: #e3d97e;
    --branco-titulo: #ffffff;
    --branco-texto: #d3d8e2;
    --azul-titulo: #0c13a4;
    --azul-texto: #1118e0;
    --cinza-escuro: #333333;
    --amarelo-escuro: #e9fe03;
    --amarelo-claro: #b7be2d;
    --cor-link: #c6c6c6;

}

body {
    background-color: var(--fundo-azul);
    font-family: 'Raleway', sans-serif;
    line-height: normal;
}

a {
    text-decoration: none;
    color: var(--cor-link);
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}

h3 {
    font-size: 1.5rem;
}

nav {
    display: flex;
}

.tudo {
    display: flex;
    flex-direction: column;
}

.container {
    padding: 5% 10%;
}

.botao {
    display: flex;
    font-size: 1.2rem;
    padding: 1rem;
    box-sizing: border-box;
    outline: none;
    border: none;
    border-radius: 2px;
    color: var(--branco-titulo);
    transform: translateX(0) scale(1);
    transition: 0.5s;
}

.botao:hover {
    cursor: pointer;
    transform: translateX(2px) scale(1.1);
}

@media screen and (max-width:1024px) {

    .container {
        padding: 2.5% 5%;
    }

    h1,
    h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width:768px) {

    h1,
    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .botao {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
}