@charset "UTF-8";
:root{
    --color1:#262401;
    --color2:#465902;
    --color3:#6E8C03;
    --color4:#A9BF04;
    --color5:#ABD904;
    --color6:black;
    --color7:white;
}
/*
- Até 768px → celular 📱
- 768px até 992px → tablet 📲
- 992px até 1200px → desktop 💻
- Acima de 1200px → TV / telas grandes 📺
*/

@media screen and (min-width: 768px) and (max-width: 992px) {
    /*Config Tablet*/
    body{
        background: url(../assets/image/paisagem.jpg) center center no-repeat
        fixed;
        background-size: cover;
    }
    section#login{
        width: 80vw;
        height: 340px;
    }
    section#login div#imagem{
        float: left;
        width: 40%;
        height: 100%;
    }
    section#login div#formulario{
        float: right;
        width: 60%;
    }
    div#formulario h1{
    font-size: 2em;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px){
    /*Config desktop*/
     body{
        background: url(../assets/image/paisagem.jpg) center center no-repeat
        fixed;
        background-size: cover;
    }

    section#login{
        width: 790px;
        height: 400px;
    }
    section#login div#imagem {
        float: right;
        width: 50%;
        height: 100%;
    }
    section#login div#formulario{
        float: left;
        width: 50%;
    }
    div#formulario h1{
    font-size: 3em;
    }
    div#formulario p{
    margin: 25px 0;
    }
}
@media screen and (min-width: 1200px){
     /*Config tv*/
    body{
        background: url(../assets/image/lion.jpg) center center no-repeat fixed;
        background-size: cover;
     }
    section#login{
        width: 790px;
        height: 450px;
    }
        section#login div#imagem {
        float: left;
        width: 50%;
        height: 100%;
    }
    section#login div#formulario{
        float: right;
        width: 50%;
    }
    div#formulario h1{
    font-size: 3em;
    }
    div#formulario p{
    margin: 25px 0;
    }
}