#formcontainer {
    width: 350px;
    height: 632px;
    background-color: #999cd2c2;
    position: relative;
    top: 20px;
    left: 30%;
    box-shadow: 0 0 20px black;
    border-radius: 8px
}

.mt-2 {
    margin-top: 8.5rem !important;
  }

#img1 {
    width: 350px;
    height: 150px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px
}


#cross {
    width: 20px;
    height: 20px;
    position: relative;
    top: -145px;
    left: 94%
}


#text {
    font-size: 25px;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    position: relative;
    top: -20px
}


/* 
#email,

#password {

    width: 290px;

    height: 1px;

    position: relative;

    top: -24px;

    left: 7%;

    border-radius: 5px;

    border-width: 1px;

    border-color: gray;

    padding: 20px;

    font-size: 20px;

    outline: none;

    margin-bottom: 15px
} */



#email:hover,
#password:hover {
    background-color: gainsboro
}



#email:focus,
#password:focus {
    box-shadow: 0 0 10px green;
    border: none
}



/* #check {

    position: relative;

    top: 1px;

    left: 9%
} */



/* #text1 {

    font-size: 17px;

    font-family: 'Roboto Slab', serif;

    position: relative;

    top: -24px;

    left: -21%;

    color: rgb(243, 229, 229)
} */



#forget {

    position: relative;

    top: 0px;

    left: -10%;

    color: darkblue;

    font-size: 16px;

    font-family: 'Roboto Slab', serif
}



#login {

    width: 76px;

    height: 36px;

    position: relative;

    left: 2%;

    top: 8px;

    cursor: pointer;

    font-size: 16px;

    font-family: 'Roboto Slab', serif;

    border-radius: 5px;

    border: none;

    background-color: rgb(0, 128, 0);

    color: white
}



#login:hover {

    background-color: rgb(0, 128, 0, 0.7)
}



#hrline1 {

    line-height: 1em;

    position: relative;

    top: -52px;

    left: -1%;

    width: 38%
}



#text2 {

    font-size: 16px;

    font-family: 'Roboto Slab', serif;

    position: relative;

    top: -84px;

    left: 0%;

    color: rgb(243, 229, 229)
}



#hrline2 {

    position: relative;

    top: -120px;

    left: 60%;

    width: 37%
}



#facebook1,

#google1 {

    width: 15px;

    height: 15px;

    position: relative;

    left: -7%;

    top: 1px
}



#facebook,

#google {

    width: 140px;

    height: 40px;

    position: relative;

    top: -120px;

    left: 7%;

    border-radius: 5px;

    border-width: 1px;

    border-color: black;

    font-size: 17px;

    background-color: white
}



#facebook:hover {

    background-color: #2c27bc;

    color: white;

    transition: 0.5s
}



#google {

    position: relative;


}



#google:hover {

    background-color: #ce6c46;

    color: white;

    transition: 0.5s
}



#text3 {

    position: relative;

    top: 14px;

    left: -7%;

    font-size: 16px;

    font-family: 'Roboto Slab', serif;

    color: rgb(243, 229, 229)
}

#emailError,
#passwordError {
    position: relative;
    top: -15px;
    /* left: 7%; */
}

#signup {
    position: relative;
    top: -27px;
    left: 44%;
    color: black;
    font-size: 16px;
    font-family: 'Roboto Slab', serif
}

#g-recaptcha {
    position: relative;

    /* top: -64px;

    left: 7%; */
}


@media only screen and (max-width:830px) {

    #formcontainer {

        position: relative;

        left: 20%
    }

}



@media only screen and (max-width:620px) {

    #formcontainer {

        position: relative;

        left: 10%
    }

}



@media only screen and (max-width:530px) {

    #formcontainer {

        position: relative;

        left: 4%
    }

}


@media only screen and (max-width:360px) {

    #formcontainer {

        position: relative;

        left: 2%
    }
}

@media only screen and (max-width:240px) {

    #formcontainer {

        position: relative;

        left: 1%
    }

}