main {
    background-color:#F0F0F0;
    margin-top:120px;
    padding:20px;
}

main > article > h1 {
    font-size:50px;
    color:#403042;
    margin-bottom:10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #F0F0F0;
    transition: background-color 500000s ease-in-out 0s;
}

.loginInputField{
    width:98%;
    height:50px;
    margin-bottom:10px;
    background-color:#312533;
    border-width:0px;
    border-radius:10px;
    color:#F0F0F0;
    font-size:25px;
    padding-left:2%;
}

.submitButton {
    width:50%;
    margin-left:25%;
    margin-top:50px;
    height:50px;
    font-size:25px;
    font-weight:bold;
    background-color:#2196F3;
    border-width:0px;
    border-radius:20px;
    cursor: pointer;
}

/*Login section*/
#login {
    width:48%;
    padding:0px 2% 0px 0px;
    height:500px;
    float:left;
}

#login > h1 > span {
    color:#4C394E;
    font-size:15px;
    float:right;
    margin-top:35px;
    cursor: pointer;
}

#login > p {
    color:#4C394E;
    position:absolute;
    bottom:0;
    margin-bottom:50px;
    font-weight:bold;
}

#login > p > a {
    color:#4C394E;
    text-decoration: underline;
}

/*Divider*/
#sectionDivider {
    position:absolute;
    left:0;
    margin-left:49%;
    height:60%;
    width:1px;
    background-color: #403042;
}

/*Join section*/
#join {
    float:left;
    width:50%;
}

#login > form > [type="button"] {
    margin-top:75px;
}

/*Checkboxes*/
.container {
    display: block;
    position: relative;
    padding-left: 45px;
    margin-top: 15px;
    margin-bottom: 35px;
    cursor: pointer;
}

.container-text {
    font-size: 15px;
    color:#403042;
    position:absolute;
    margin-top:7px;
}

#keepContainer { margin-top:70px; }

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    width: 35px;
    border-radius:5px;
    border-width:0px;
    background-color: #4C394E;
}

.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 12px;
    top: 3px;
    width: 8px;
    height: 20px;
    border: solid #F0F0F0;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


@media only screen and (max-width:900px) {
    #login > h1 > span { display:none; }

    .submitButton {
        width:90%;
        margin-left:5%;
    }
}