/* Casa de CSS */
/*CSS Grid for */
body{
display: grid;
grid-template-columns: 1.35fr 1.65fr;
height: 100vh;
margin: 0;
}
h1{
color: white;
font-size: 4rem;
font-family: 'Roboto', 'Open Sans', sans-serif;
margin: 0.5rem 0 1rem 0;
font-weight: 700;
}
p{
color: white;
font-size: 1.5rem;
font-family: 'Roboto', 'Open Sans', sans-serif;
margin-top: 0;
margin-bottom: 1.5rem;
font-weight: 400;
}
label{
font-family: 'Roboto', 'Open Sans', sans-serif;
font-weight: 600;
display: block;
margin-bottom: 0.5rem;
}
button{
font-family: 'Roboto', 'Open Sans', sans-serif;
font-size: 11pt;
background-color: rgb(76, 100, 237);
color: white;
border: none;
padding: 1rem;
border-radius: 0.25rem;
cursor: pointer;
margin-top: 0;
width: 100px;
text-align: center;
font-weight: 600;
}
/*hover effect for sign in button*/
button:hover{
background-color: rgb(85, 140, 230);
}
a{
font-family: 'Roboto', 'Open Sans', sans-serif;
color: rgb(85, 140, 230);
text-decoration: none;
margin-top: 1rem;
font-weight: 500;
}
/*hover effect for forgot password link (covers all tags though)*/
a:hover{
text-decoration: underline;
}
form-field{
display: block;
margin-bottom: 1.5rem;
}
#login-info{
background: linear-gradient(135deg, #72aef2, #0e68de);
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
#login-form{
background-color: white;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0rem;
}
#login-form form-field {
margin-bottom: 1.5rem;
}
#login-form input {
padding: 0.75rem;
border-radius: 0.25rem;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5rem;
font-size: 1rem;
}
/*a means all tags, which in this case would be the forgot password link*/
#login-form a {
display: block;
text-align: right;
width: 100%;
font-size: 0.875rem;
margin-top: 0;
}