:root {
    --poppins: 'Poppins', sans-serif;
    --ibm: 'IBM Plex Sans', sans-serif;

    --azul: #3772FF;
    --azul-claro: #36D6AD;
    --coral: #FC7071;
    --coral-claro: #FF9D9E;
    --cinza: #737380;
    --cinza-claro: #BCBCBC;
    --cinza-fundos: #F7F7F7;
}

body {
    font-family: var(--poppins);
    font-size: 16px;
    font-weight: 400;
    
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    overflow-x: hidden;
}

.botao {
    align-self: center;
    font-weight: 700;

    background-color: var(--coral);
    color: #FFFFFF;

    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .4);

    border-radius: 6px;

    padding: .5rem 0;
    width: 75%;

    transition: all .3s ease;
}

.botao:hover {
    background-color: var(--coral-claro);
}

@media screen and (min-width: 768px) {
    .botao {
        font-size: 18px;

        width: 50%;
    }
}