@font-face {
    font-family: 'Ainslie Sans';
    src: url('../fonts/ainslie-sans-normal-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PPNeueWorld';
    src: url('../fonts/PPNeueWorld-CondensedRegular.otf ') format('opentype');
    font-weight: 400;
    font-style: normal;
}
*{
    margin:0;
    padding:0;
}

body{
    background-color:#C1CFDD;
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.containerPrincipal{
    width: 80%;
    height: 90%;
    background-color: #F6F4EA;
    margin: 0 auto;
    /*borda arredondada*/
    border-radius: 20px;
    display: flex;
    box-shadow: 0px 30px 55px 8px #4D576C4D;

}

.quadradoAzul{
    width: 50%;
    height: 100%;
    background-color: #91A5BE;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.quadradoAzul img{
    width: 70%;
    height:auto;
}
.quadradoAzul h2{
    color:#F6F4EA;
    font-size: 30px;
    margin-bottom: 20px;
    font-family: 'PPNeueWorld';
    font-weight: 200;

}

.container-direito{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5%;
}
.container-login{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#forms-login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: left;
}
.container-login h1{
    font-family: 'Ainslie Sans';
    font-weight: 500;
    font-size: 4rem;
    color: #4d576c;
    align-self: flex-start;
    margin-bottom: 5vh;
}
.text-label{
    font-family: 'Ainslie Sans';
    font-weight: 500;
    font-size: 1.5rem;
    color: #242535b7;
    padding: 18px 18px 18px 0px;
    align-self: flex-start;
    opacity: 0.6;
}
.input-text{
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
    border: 1px solid #91A5BE;
    border-radius: 5px;
    font-size: 1rem;
}

#check-login{
    margin-top: 6vh;
    display: flex;
    align-items: center;
    align-self: flex-start;

}
#check-login input{
    width: 20px;
    height: 20px;
    border: 1px solid #91A5BE;
}

#check-login label{
    font-family: 'Ainslie Sans';
    font-weight: 500;
    font-size: 1.2rem;
    color: #242535b7;
    margin-left: 8px;
}

#login-button{
    background: linear-gradient(90deg, #8FA3BD 0%, #4D576C 50%, #1A1C28 100%);
    color:#F4F2E8;
    font-size: 20px;
    font-weight: 200;
    border: none;
    width: 60%;
    height: 50px;
    border-radius: 10px;
    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.671);
    margin-top: 20px;
    font-family: 'Ainslie Sans';
}
#login-button:hover{
    cursor: pointer;
    opacity: 0.8;
}


/* não aparece ainda, somente no mobile */
.mobileLogo, .mobileH1{
    display: none;
}

@media (max-height: 500px) and (min-aspect-ratio: 7/4) {
    .container-login h1{
        display: none;
    }
    .input-text{
        height: 5px;
    }
}