@charset "UTF-8";

@media screen and (min-width: 768px) and (max-width: 992px) {
    body, html {
        background-image: linear-gradient(#22F073, #18EFB4, #0AE0F0);
        height: 100vh;
    }

    section {
        width: 600px;
        height: 300px;
    }

    div#imagem {
        width: 45%;
        height: 100%;
        float: left;
    }
    
    div#formulario {
        float: right;
        width: 55%;
        padding: 20px 40px;
    }

    div#formulario > h1 {
        margin: 0px;
        padding: 0px;
    }

    div#formulario > p {
        text-align: justify;
    }
}

@media screen and (min-width: 993px) {
    body, html {
        background-image: linear-gradient(#22F073, #18EFB4, #0AE0F0);
        height: 100vh;
    }

    section {
        width: 850px;
        height: 400px;
    }

    div#imagem {
        float: right;
        width: 60%;
        height: 100%;
    }

    div#formulario {
        float: left;
        width: 40%;
        height: 100%;
        padding: 40px;
    }

    div#formulario > h1 {
        font-size: 2em;
        padding: 15px;
        margin-top: -5px;
    }

    div#formulario > p {
        text-align: justify;
        font-size: 1.2em;
        margin: auto;
    }
}