@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* SMARTPHONE E PEQUENAS TELAS */
@media screen and (max-width: 768px) {
    main {
        width: 300px;
    }

    div#hime {
        background-position: top center;
        width: 300px;
        height: 250px;
        border-bottom: 2px solid #f47521;
    }


    div.fields input {
        width: 225px;
    }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width:992px) {
    main {
        width: 700px;
    }
    
    div#hime {
        background-position: center center;
        width: 350px;
        height: 323px;
        float: left;
        border-right: 2px solid #f47521;
    }
    
    div#form {
        padding: 30px 15px;
        float: right;
    }
    
    div.fields input {
        width: 275px;
    }
}

/* DESKTOP E GRANDES TELAS */
@media screen and (min-width: 993px) {
    main {
        max-width: 850px;
    }
    
    div#hime {
        background-position: top center;
        width: 400px;
        height: 323px;
        float: right;
        border-left: 2px solid #f47521;
        background-size: cover;
    }
    
    div#form {
        display: inline-block;
        padding: 30px 45px;
    }
    
    div.fields input {
        width: 305px;
    }
    
}