global.css

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

html{
    --black: #0D114F;
    --white: #FAFAFA;
    --red: #E83F5B;
    --light-blue: #E0ECFF;
    --blue: #3485FF;
    --background: #F6FAFF;
    --overlay: #040911;
    --icons-details: #A5B0C1;

    --grey-dark: #4D5E77;
    --grey-blue: #A1B2CD;
    --grey-light:#E5EAF1;

    /* 1rem = 16px (User Agent) = 100% (User Agent) */
    font-size: 62.5% /* 10px */
}

body{
    display: flex;
    height: 100vh;
    background: var(--background);
}

body, button, input, textarea{
    /* intervalo de tamanho */
    font-size: clamp(14px, 1.6rem, 2vw);

    font-family: 'Open Sans', sans-serif;
    /* font-family: 'Poppins', sans-serif; */
}

.content{
    width: 100%;
    margin: 0 auto;
}

.sr-only{
    position: absolute;
    height: 1px;
    width: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/*--------- input and buttons*/
input, button, .button{
    border-radius: .8rem;
    height: 5rem;
}

button, .button{
    font-family: 'Poppins';
    font-weight: 500;
    line-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--blue);
    color: var(--white);

    transition: filter .2s;

    cursor: pointer;
}

button:hover, .button:hover{
    filter: brightness(1.2);
}

button > img
.button > img{
    margin-right: 1rem;
    width: 2rem;
}

button.outlined,
.button.outlined{
    background: var(--white);
    color: var(--blue);
    border: .2rem solid var(--blue);
}

.content header{
    width: 80%;  
    margin: 3.5rem auto;
}

.content header img{
    width: 16.7rem;
}