@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');


*,*::after,*::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

html,body,main{
    height: 100vh;
    min-height: 600px;
    width: 100vw;
    overflow-x: hidden;
}

/* Váriaveis*/

:root{
    --degrade: linear-gradient(to right, #df7e7a 0%,#B76A66 33%,#B96B67 66%,#8F5553 100%);
    --borda-degrade:#B76A66;
    --fonte-clara: #ffffff;
    --font-texto: #000000;
    --cabeca-rodape: #28211e;
    --visivel: none;
    --degradecinza: linear-gradient(to right, #656565 0%,#7D8287 66%,#656565 100%);
    
}

#conteiner{
    display: grid;
    grid-template: 40% 60px 60px 1fr 60px 1fr  / 14fr 500px 1fr;
    
}


.caseimg{

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    grid-area: 1/1/-1/2;    
}

#caseimglogin{
    background-image: url('./img/img_Login.jpg');}

#caseimgcadastro{
    background-image: url('./img/img_cadastro.jpg');}

#caseimg2{
    background-image: url('./img/img_Login_2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

   }
   
#caseimgcadastro2{
    background-color: #CBAF94;
   }





#caseform{
    display: grid;
    grid-template: 40% 60px 60px 60px 10fr 60px  100px 1fr / 1fr;
    grid-area: 1 / 2 / -1 / 3;
    align-items: center;
    gap:10px; 
    box-shadow: 0px 0px 20px 40px rgba(0, 0, 0, 0.267);
        
}

#caseform1{ grid-row: 1/span 1;}
#caseform2{ grid-row: 2/span 1;}
#caseform3{ grid-row: 3/span 1;}
#caseform4{ grid-row: 4/span 1;}
#caseform5{ grid-row: 6/span 1;}
#caseform6{ grid-row: 7/span 1;}
#caseform7{ grid-row: 5/span 1;}

#caseform4,#caseform6,#caseform7{align-self: start;}
#caseimg2,#caseimgcadastro2{ grid-row: 1/-1}


.formulario {
    text-align: center;
    text-decoration: none;
}
.icon{
    transform: translateY(15px);
}

.formulario a{text-decoration: none;}

#logo{
    min-height: 200px;
    height: 30vh;
    max-height: 300px;
    
}

#esqueceusenha{
    color: #656565;
    font-size: 18px;
    padding: 0px;
    text-decoration: none;    
}
#esqueceusenha:hover{
    color: #DF7E7A;
    font-weight: bolder;
    text-decoration: underline;
}

#cadastrar{
    color: #656565;
    }

.entrar:hover{

    display: inline-block;
    border-radius: 28px;
    color: #656565;
    margin: 5px;
    padding: 5px 20px; 
    #str {color: var(--borda-degrade)}
   }
.inscrevase:hover{border: 2px solid var(--borda-degrade);}


input[type]{
    height: 50px;
    margin: 5px;
    width: 60%;
    border-radius: 10px;
    border: #000000 solid 1px;
    padding: 10px;
}

input[type=checkbox]{
    height: 15px;
    margin: 10px 0;
    width: 20px;
    border-radius: 10px;
    border: #000000 solid 1px;
    padding: 10px;
}

input[type=submit]{
    border:none;
    border-radius: 80px;
    background-image: var(--degrade);         
    color: #ffffff;
    font-size: 2.2em;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}   

input[type=submit]:hover{transform: scale(110%);}


label{display: none;}
.cadastro{label{display: inline;}}


#accessibility{
    position: relative;
    top: 95%;
    left: 0%;
    width:20px;
    height: 20px;
    /*
    background-color: rgba(0, 0, 255, 0.445);
    */
    border: 2px solid #000000 ;
    border-radius: 50%;
    fill: black;
    

}


.formesqueceu h1{
    font-size: clamp(1.5em,2vw,2em);

}

.formesqueceu p{
    font-size: clamp(1em,2vw,1.5em);
    padding: 20px 70px;
    text-align: justify;
}



@media screen and (max-width:600px) {

    #conteiner{
    grid-template: 40% 60px 60px 1fr 60px 1fr  / 1fr 90% 1fr; 
    row-gap: 20px;
    gap:10px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    }
    #caseimg,#caseimg2,#caseimgcadastro2,#caseimgcadastro {display: none;}

    #caseform{
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
        border-radius: 50px;
        margin: 20px 0px;
                        
    }

    .cadastro #caseform{min-height: 750px;}

    body{
    
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
    }
    
    .cadastro{
        background-image:  url('./img/img_cadastro_mobile.jpg');
    }

    .login{
        background-image:  url('./img/img_login_mobile.jpg');
    }



}