@media screen and (min-width: 768px) {

    body{
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }

    div#area{
        width: 80vw;
        height: 340px;
        
        display: flex;
        transition: 0.2s linear;
    }

    section#imagem{
        width: calc(40%);
        height: 100%;

        border-radius: 30px 0 0 30px;
    }

    section#login{
        width: calc(80%);
    }
}

@media screen and (min-width: 992px) {

    body{
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }

    div#area{
        width: 900px;
        height: 350px;
        margin: 10px;
        
        display: flex;
        flex-direction: row-reverse;       
        transition: 0.2s linear;
    }

    section#imagem{
        width: calc(50%);
        border-radius: 0 30px 30px 0;
    }

    section#login{
        width: calc(50%);
    }    
}

@media print {

    div#area{
        height: 500px;
        border: 1px solid black;
    }

    section#imagem{
        height: 20%;
    }

    p.p-dados-login,
    input.bt-login{
        border: 1px solid rgba(0, 0, 0, 0.431);
    }

    main::after{
        content: 'Fonte site: https://github.com/sraraujo/projeto-login';
    }
}