@charset "UTF-8";

/* Paleta de cores 

    Azul-Celeste: #317A86
    Azul-Acizentado: #61727C
    Azul-esverdeado-escuro: #3E6F6B
    Azul-esverdeado-claro: #5D8679
    Verde-Jade: #3E7C59

*/
*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background-image: linear-gradient(to right,var(--cor1), var(--cor3));
}

:root{
    --cor0: #317A86;
    --cor1:#61727C;
    --cor2: #465f5c;
    --cor3: #5D8679;
    --cor4: #418b88;
    --cor5: #2b5d5b;
}

.imagem{
    border-radius: 15px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    width: 80vw;
    height: 170px;
    background-image: url(../imagens/building.jpg);
    background-size: cover;
    background-position: center center;
    box-shadow: -2px -5px 14px -8px;
    
}

h1{
    padding: 15px 0px 10px 0px;
    text-align: center;
    font-size: 1.6em;
}

.boasvindas{
    padding: 8px;
    padding-bottom: 20px;
    font-size: 0.9em;
    text-align: justify;
}

div#login{
    display: block;
    margin: auto;
    position: relative;
    width: 75vw;
    height: 6vh;
    padding: 2px;
    background-color: var(--cor2);
    color: white;
    border-radius: 4px;
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.538);
}
div#senha{
    display: block;
    margin: auto;
    position: relative;
    margin-top: 12px;
    width: 75vw;
    height: 6vh;
    padding: 2px;
    background-color: var(--cor2);
    color: white;
    border-radius: 4px;
    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.537);
}

section#campo-login{
    border-radius: 15px;
    background-color: white;
    position: relative;
    display: block;
    margin: auto;
    width: 80vw;
    height: 85vh;
    margin-top: 20px;
    box-shadow: 0px 0px 4px 0px;
}

input#login{
    
    position: absolute;
    padding-left: 10px;
    top: 15%;
    left: 15%;
    width: 60vw;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgb(124, 154, 144);
}
input#senha{
    position: absolute;
    padding-left: 10px;
    top: 15%;
    left: 15%;
    width: 60vw;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgb(124, 154, 144);
}
.material-symbols-outlined{
    padding-left: 3px;
}

input#logar{
    width: 75vw;
    height: 50px;
    border-radius: 4px;
    font-size: 0.8em;
    display: block;
    margin: auto;
    background-color: var(--cor4);
    color: white;
    border: 0px solid;
    cursor: pointer;
    margin-top: 18px;
    margin-bottom: 8px;
}

input#logar:hover{
    background-color: var(--cor5);
}

input#esqueci{
    width: 75vw;
    height: 50px;
    border-radius: 4px;
    font-size: 0.8em;
    display: block;
    margin: auto;
    background-color: white;
    color: var(--cor4);
    border: 1px solid var(--cor4);
    cursor: pointer;
}

input#esqueci:hover{
    background-color: var(--cor2);
    color: white;
}

@media screen and (orientation: portrait) {
    section#campo-login{
        height: 96vh;
    }

    div#login{
        height: 44px;
    }
    div#senha{
        height: 44px;
    }
}

@media screen and (orientation: landscape) {

    section#campo-login{
        height: 550px;
    }

    div#login{
        height: 45px;
    }
    
    div#senha {
        height: 45px;
    }
}