/*******             *******/
/*******     All     *******/
/*******             *******/
body{

    margin: 0px; 
    font-family: arial; 
    background-color: #fff; 
    font-family: sans-serif;

}
/*******             *******/
/*******     All     *******/
/*******             *******/







/*******             *******/
/*******   Classes   *******/
/*******             *******/
.login_register_page_container{

    width: 60%; 
    min-height: 600px; 
    margin: auto; 
    margin-top: 70px; 
    margin-bottom: 200px;

}

.login_register_page_subcontainer{

    width: 600px; 
    margin: auto; 
    padding: 20px 30px; 
    padding-bottom: 70px; 
    border: 1px solid #f4f4f4; 
    border-radius: 5px; 
    -webkit-box-shadow: 0px 9px 15px -5px rgb(38 38 38 / 15%); 
    -moz-box-shadow: 0px 9px 15px -5px rgba(38,38,38,0.15); 
    box-shadow: 0px 9px 15px -5px rgb(38 38 38 / 15%);

}

.login_register_page_subcontainer > h2{

    font-size: 30px; 
    margin-top: 40px; 
    margin-bottom: 40px; 
    color: #3f5689; 
    text-align: center;

}

.login_register_page_input_section{

    width: 80%; 
    margin: auto;

}

.login_register_page_input_section input{

    font-size: 20px;
    color: #38444D;
    font-family: sans-serif;
    width: calc(100% - 24px - 2px);
    margin: 5px 0px;
    resize: none;
    padding: 7px 12px;
    border-radius: 5px;
    border: 1px solid #c8c8c8;

}

.login_register_error_message{

    width: 100%; 
    color: #ff654e; 
    margin-top: 20px; 
    text-align: center; 
    display: none;

}

.login_register_success_message{

    width: 100%; 
    color: #7DF578; 
    margin-top: 20px; 
    text-align: center; 
    display: none;

}

.login_register_page_link_section{

    text-align: center;

}

.login_register_page_link_section > span{

    font-size: 14px; 
    color: #38444c; 
    font-weight: 200;

}

.login_register_page_link_section > a{

    color: #606179;

}

.login_register_page_link_section > a:hover{

    border-bottom: 1px solid;

}

.login_register_page_button{

    width: calc(100% - 60px); 
    padding: 15px 30px; 
    background-color: #ff654e; 
    font-size: 18px; 
    justify-content: center; 
    align-items: center; 
    color: #fff; 
    border-radius: 5px; 
    margin-top: 50px; 
    margin-bottom: 30px;
    cursor: pointer;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;

}

.login_register_page_button > span{

    float: right;

}

.login_register_page_button:hover{

    -webkit-box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%); 
    -moz-box-shadow: 0px 9px 15px 0px rgba(38,38,38,0.15); 
    box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%);

}
/*******             *******/
/*******   Classes   *******/
/*******             *******/







/*******            *******/
/*******    ID's    *******/
/*******            *******/

/*******            *******/
/*******    ID's    *******/
/*******            *******/



@media (pointer: coarse) or (max-width: 900px){

    .login_register_page_container{

        width: 85%;
        margin-top: 250px;
        margin-bottom: 400px;

    }

    .login_register_page_subcontainer{

        width: calc(100% - 60px);

    }

    .login_register_page_container h2{

        font-size: 50px;
        margin-top: 70px;

    }

    .login_register_page_container input{

        font-size: 35px;
        width: calc(100% - 40px);
        padding: 10px 20px;

    }

    .login_register_page_link_section{

        margin-top: 70px;
        margin-bottom: 50px;

    }

    .login_register_page_link_section a{

        font-size: 30px;

    }

    .login_register_page_link_section span{

        font-size: 25px;

    }

    .login_register_page_button{

        font-size: 28px;

    }

}