:root {
    --color-background: #F0F0F7;
    --color-primary-lighter: #4797FF;
    --color-primary-light: #3f84dd;
    --color-primary: #3352FF;
    --color-primary-dark: #2b3eaa;
    --color-primary-darker: #6842c2;
    --color-secondary: #5DB31B;
    --color-secondary-dark: #458316;
    --color-title-in-primary: #FFFFFF;
    --color-text-in-primary: #c2d0ff;
    --color-text-title: #32264D;
    --color-text-complement: #7c7885;
    --color-text-base: #6A6180;
    --color-line-in-white: #E6E6F0;
    --color-input-background: #F8F8FC;
    --color-button-text: #FFFFFF;
    --color-box-base: #FFFFFF;
    --color-box-footer: #FAFAFC;
    --color-small-info: #C1BCCC;
    font-size: 60%;
    /* controle das medidas rem */
}

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

html,
body {
    height: 100vh;
}

body {
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
}

body,
input,
button,
textarea {
    font: 500 1.6rem Roboto;
    color: var(--color-text-base);
}

#container {
    width: 90vw;
    max-width: 700px;
}

@media (min-width: 700px) {
    :root{
        font-size: 62.5%;
    }
}