:root {
    font-size: 60%;
    
    --color-background: #F0F0F7;
    --color-primary-lighter: #74b9ff;
    --color-primary-light: #55aaff;
    --color-primary: #0984e3;
    --color-primary-dark: #0984e3;
    --color-primary-darker: #066ebe;
    --color-secundary: #04D361;
    --color-secundary-dark: #04BF58;
    --color-title-in-primary: #FFFFFF;
    --color-text-in-primary: #cce6ff;
    --color-text-title: #094574;
    --color-text-complement: #7392aa;
    --color-text-base: #5a7992;
    --color-line-in-white: #E6E6F0;
    --color-input-background: #F8F8FC;
    --color-button-text: #FFFFFF;
    --color-box-base: #FFFFFF;
    --color-box-footer: #FAFAFC;
}

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

html, body, #root {
    height: 100vh;
}

body {
    background: var(--color-background);
}

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

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

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

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