:root {
    --cor-azul: #5595E9;
    --cor-azul-claro: #D4E4FA;
    --cor-azul-escuro: #2A7AE4;
    --cor-branco: #FFFFFF;
    --cor-cinza: #A2A2A2;
    --cor-cinza-claro: #C8C8C8;
    --cor-cinza-escuro: #464646;
    --cor-leite: #F5F5F5;
    --cor-leite-claro: #EAF2FD;
    --cor-leite-escuro: #E5E5E5;
    --cor-roxo: #7B61FF;
}

body {
    font-family: 'Raleway', sans-serif;
    margin: 0 auto;
}

/**************************Classes genéricas aqui**************************/

.primary--button {
    background: var(--cor-azul-escuro);
    border: none;
    color: var(--cor-branco);
    cursor: pointer;
}

.primary--button:hover {
    background: var(--cor-azul);
    box-shadow: 0 0 .3125rem var(--cor-azul-escuro);
    transition-duration: 0.1s;
}

.primary--button:active {
    background: var(--cor-azul);
    box-shadow: 0 0 .3125rem var(--cor-azul-escuro);
    transform: scale(1.1);
}

.secondary--button {
    background: none;
    border: 1px solid var(--cor-azul-escuro);
    color: var(--cor-azul-escuro);
    cursor: pointer;
}

.secondary--button:hover {
    background: var(--cor-azul-claro);
    box-shadow: 0 0 .3125rem var(--cor-azul-escuro);
    transition-duration: 0.1s;
}

.secondary--button:active {
    background: var(--cor-azul-claro);
    box-shadow: 0 0 .3125rem var(--cor-azul-escuro);
    transform: scale(1.1);
}

.main--form {
    border: none;
    border-radius: .25rem;
    box-shadow: 0 1px 0 var(--cor-cinza-claro);
}

.main--form::placeholder {
    color: var(--cor-cinza);
}

.main--form:focus {
    outline: none;
    border: .0625rem solid var(--cor-azul-escuro);
    box-shadow: 0 0 .3125rem var(--cor-azul-escuro);
    transition-duration: 0.1s;
}

@media (min-width: 320px) {
    .container {
        padding: 0 1rem;
    }
}

@media screen and (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

@media (min-width: 992px) {
    .container {
        padding: 0 9.5rem;
    }
}