@charset "UTF-8";

/*
    Paleta de cores:
    Verde: #49a09d
    Lilas: #5f2c82

*/

@media all{
    *{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }

    body, html{
        background-color: #5f2c82;
        height: 100vh;
        width: 100vw;
    }

    main{
        position: relative;
        height: 100vh;
        width: 100vw;
    }

    section#login{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        background-color: white;
        width: 250px;
        height: 515px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);

        transition: width .3s, height .5s;
        transition-timing-function: ease;
    }

    section#login>div#imagem{
        background: #5f2c82 url(../imagens/fondo-predio.jpg) center center no-repeat;
        background-size: cover;
        height: 200px;
        display: block;
    }

    section#login>div#form{
        padding: 10px;
        display: block;
    }

    div#form>h1{
        text-align: center;
        margin-bottom: 10px;
    }

    div#form>p{
        font-size: .8em;
    }

    form>div.campo{
        background-color: #5f2c82;
        width: 100%;
        display: block;
        height: 40px;
        border-radius: 8px;
        margin: 5px 0px;
    }

    div.campo>span{
        color: white;
        font-size: 2em;
        width: 40px;
        padding: 5px;
    }

    div.campo>input{
        background-color: #94cfcd;
        font-size: 1em;
        height: 100%;
        width: calc(100% - 45px);
        border: 0px;
        border-radius: 8px;
        padding: 2px;
        transform: translateY(-11px);
    }

    div.campo>input:focus-within{
        background-color: white;
    }

    form label{
        display: none;
    }

    form>input[type=submit]{
        display: block;
        font-size: 1em;
        width: 100%;
        height: 40px;
        background-color: #49a09d;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    form>input[type=submit]:hover{
        background-color: #2d6462;
    }

    form>a.botao{
        display: block;
        text-align: center;
        font-size: 1em;
        width: 100%;
        height: 40px;
        padding-top: 5px;
        margin-top: 5px;
        background-color: white;
        color: #2d6462;
        border: 1px solid #49a09d;
        border-radius: 5px;
        text-decoration: none;
        transition: .4s;
    }

    form>a.botao:hover{
        background-color: #6cd3cf9d;
    }

    form>a.botao>span{
        font-size: .8em;
        transform: translateY(2px);
    }
}

@media screen and (768px <= width <= 992px) {
    body, html{
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }

    section#login{
        width: 80vw;
        height: 280px;
    }

    section#login>div#imagem{
        float: left;
        width: 30%;
        height: 100%;
    }

    section#login>div#form{
        float: right;
        width: 70%;
    }
}

@media screen and (992px <= width) {
    body, html{
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }

    section#login{
        width: 950px;
        height: 350px;
    }
    section#login>div#imagem{
        float: right;
        width: 50%;
        height: 100%;
    }

    section#login>div#form{
        float: left;
        width: 50%;
    }

    div#form>h1{
        font-size: 2em;
    }

    div#form>p{
        font-size: 1em;
    }
}