@charset "UTF-8";

:root {
    --cor05: #EB7F00;
    --cor04: #F3FFE2;
    --cor03: #ACF0F2;
    --cor02: #1695A3;
    --cor01: #225378;
}

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

body, html{
    background-color: #EB7F00;
    height: 100dvh;
    width: 100dvw;
}

main{
    position: relative;
    height: 100dvh;
    width: 100dvw;
}

/* a{

    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.452); 
}

a:hover{
    color: var(--cor01);
    text-decoration: underline;
    transition: 0.3s ease;
} */

#login{
    position: absolute;
    top: 50%;
    left: 50%;
    

    background-color:var(--cor04);
    width: 18.8rem;
    height: 39.90rem;
    border-radius: 1.25rem;
    overflow: clip;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    transition: width 0.3s ease;
    transform: translate(-50%, -50%);
    
}

#login > #imagem{
    display: block;
    background: url(../imagens/pexels-bradanton-33430528.jpg) no-repeat left bottom/cover;
    height: 12.5rem;
}

#login > #formulario{
    display: block;
    padding: 0.625rem;
}

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

#formulario > p{
    font-size: clamp(1.0em, 1.5vw, 1.8em)
}

.campo-1, .campo-2{
    border: none;
    
}

.campo-2{
    margin-top: 20px;
}




.campo-1 > label > .person-pin{
    cursor: pointer;
    margin-left: 20px;
    height: 40px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.445));
}

.campo-1 > input{
    padding: 12px;
    border: none;
}

.campo-1, .campo-2 > input{
    border-radius: 4px;
}

.campo-1, .campo-2 > input:focus-within{
    background-color: beige;
}



.campo-2 > label > .pass-key{
    cursor: pointer;
    margin-left: 20px;
    height: 40px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.campo-2 > input{
    padding: 12px;
    border: none;
}

form > input[type=submit]{
    display: block;
    margin-top: 80px;
    font-size: 1em;
    width: 100%;
    height: 2.5rem;
    background-color: #EB7F00;
    color: #F3FFE2;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

form > input[type=submit]:active{
    transform: scale(0.95);
    
    /* transition: 0.8s ease; */
}

form > .botao{
    display: block;
    margin-top: 25px;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    width: 100%;
    height: 2.5rem;
    background-color: #225378fa;
    color: #F3FFE2;
    border: 1px solid #EB7F00;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    

}

form > .botao:active{
    transform: scale(0.95);
    

}

.icone-mail{
    display: block;
    margin-left: 97px;
    
    height: 42px;
    width: 72px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.781));
}

#label-login{
    position: relative;
}

#label-login > img{
    position: absolute;
}

#label-senha{
    position: relative;
}

#label-senha > img{
    position: absolute;
}