*{
    margin: 0;
    padding: 0;
}

:root {
    --cor-de-fundo: #2D4356;
    --cor-primaria: #EAB2A0;
    --cor-secundaria: #435B66;
    --cor-terciaria: #A76F6F;
}

body {
    font-family: sans-serif;
    font-size: 18px;
    background-color: var(--cor-de-fundo);
    color: var(--cor-primaria);
}

.tituloprincipal, .titulo, .subtitulo {
    text-align: center;
}

.titulo {
    padding: 1em;
    font-size: 22px;
}

.tituloprincipal {
    font-size: 40px;
}

.subtitulo {
    padding: 2em 25%;
}

.logo {
    padding: 0 47% 2em 47%;
}

.formulario {
    margin: 0 24%;
}

.grupo1, .grupo2 {
    padding: 2em;
    margin-bottom: 1em;
    border-radius: 10px;
    border-color: var(--cor-terciaria);
}

#nome, #sobrenome, #email, #tempo, #escrevertexto, .botao  {
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
    font-weight: 500;
    font-size: 16px;
    border-radius: 10px;
}

#nome, #sobrenome, #email {
    padding: 1em;
    border: 1px solid var(--cor-terciaria);
    border-top: none;
    border-left: none;
    transition: ease-in-out, width 0.3s ease-in-out;
}

#nome:focus, #sobrenome:focus, #email:focus {
    outline: none;
    border: 1px solid var(--cor-primaria);
    border-top: none;
    border-left: none;
}

#nome, #sobrenome {
    width: 90%;
}

#nome:focus, #sobrenome:focus {
    width: 100%;

}

#email {
    width: 20%;
}

#email:focus {
    width: 25%;
}

#nome, #sobrenome {
    background-image: url(assets/user.png);
    background-repeat: no-repeat;
    background-position: 0.5em;
    padding-left: 2.5em;
}

#email {
    background-image: url(assets/mail.png);
    background-repeat: no-repeat;
    background-position: 0.5em;
    padding-left: 2.5em;
}

#email, #genero, #tempo {
    margin-bottom: 1em;
}

.genero {
    padding-bottom: 1em;
}

#tempo {
    font-size: 16px;
    padding: 0.3em;
}

#escrevertexto {
    box-sizing: border-box;
    width: 100%;
    height: 6em;
    padding: 1em;
    margin: 1em 0;
    border: 1px solid var(--cor-terciaria);
    outline: none;
}

#escrevertexto:focus {
    transition: 0.3s;
    border: 1px solid var(--cor-primaria);
    background-color: var(--cor-terciaria);
}

.botao {
    padding: 1em;
    margin-top: 2em;
    font-family: sans-serif;
    font-size: 16px;
    color: var(--cor-primaria);
}

.botao:active {
    background-color: var(--cor-de-fundo);
}

@media screen and (max-width: 900px) {
    .subtitulo {
        padding: 1em;
    }

    .logo {
        padding-left: 38%;
    }

    .formulario{
        margin: 5%;
    }

    fieldset {
        width: 100%;
    }

    .grupo1 {
        display: block;
    }

    .grupo1, .grupo2 {
        border: none;
        padding: 1em 0;
    }

    #nome, #sobrenome, #email {
        width: 70%;
    }

    #nome:focus, #sobrenome:focus, #email:focus {
        width: 75%;
    }
}