@font-face {
    font-family: "lato-bold" ;
    src: url(/font/Lato-Bold.ttf);
}

@font-face {
    font-family:"lato";
    src: url(/font/Lato-Regular.ttf);
}

@font-face {
    font-family:"Merriweather";
    src: url(/font/Merriweather-Regular.ttf);
}

*{
    margin: 0;
	padding: 0;
	border: 0;
    font-family:"lato";
}


main{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    height: 98vh;
}

a{
    text-decoration: none;
}

button{
    cursor: pointer;
}

#left{
    width: 50%;
}

#rigth{
    width: 50%;
    display: flex;
    justify-content: center;
}

#main_img{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#main_img img{
    height: 50%;
}

#main_inputs{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    margin-block: 1rem;
}

#main_inputs h2{
    font-weight: 400;
    font-size: 1rem;
    line-height: 20px;
    color: #1A202C;
    font-family:"Merriweather";
}

#main_inputs h1{
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 33px;
    color: #1A202C;
    font-family:"Merriweather";
}

#main_inputs button{
    margin-block: 1rem;
}

#inputs_login{
    margin-top: 20px;
}

#inputs_login p{
    font-weight: 400;
    font-size: 1rem;
    line-height: 19px;
    color: #1A202C;
}

#inputs_login input{
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    height: 50px;
    width: 100%;
    margin-block: 10px;
}

#inputs_bottom{
    display: flex;
    flex-direction: row;
    margin-block: 1.5rem;
    justify-content: space-between;
}

#inputs_bottom a{
    font-size: 90%;
}

#check_box{
    display: flex;
    flex-direction: row;
}

#check_box p{
    margin-inline: 0.4rem;
    font-size: 90%;
}

#button_login{
    background: #04C45C;
    border-radius: 5px;
    height: 4rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 19px;
    color: #FFFFFF;
}

#button_google{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #1A202C;
    border-radius: 5px;
    height: 4rem;
    font-weight: 700;
    font-size: 1rem;
    color: #FFFFFF;
}

#button_google p{
    margin-inline: 0.5rem;
}

#button_google img{
    margin-inline: 1rem;
}

#register{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 3rem;
}

#register p{
    margin-inline: 0 0.5rem;
}

/* ***** Copyright *****  */

#copy_section{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 90%;
    margin-top: 1rem;
}

#copy_button{
    background-color: #F3F5F7;
    color: #000000;
    border: 1px solid black;
    border-bottom: 0px solid;
    cursor: pointer;
    align-self: flex-end;
    width: 1rem;
    height: 1rem;
    font-size: 0.8rem;
}

#copy_hidden{
    display: none;
}

#copy_hidden a{
    text-decoration: none;
    color:#569ff5;
    margin-inline: 0rem;
}

#copy_section.show #copy_hidden{
    font-size: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    color: #000000;
    background-color: #F3F5F7;
    border-top: 1px solid black;
}

@media (max-width:1024px){
    
    #left{
        width: 0%;
    }
    
    #rigth{
        width: 100%;
    }
    
    #main_img{
        width: 0%;
        height: 0%;
    }
    
    #main_img img{
        height: 0%;
    }
    
    #main_inputs{
        width: 85%;
    }
}