body{
    background: url(../images/2.jpg) no-repeat center center fixed;
    background-size: cover;
}

.main-section{
    margin: 0 auto;
    margin-top: 130px;
    padding: 0; /*for wider edges*/
}
.modal-content{
    background: #f70d0d;
    opacity: 0.75;
    padding: 0 18px;
    box-shadow: 0px 0px 3px #848484;/*for shadow efect around the box*/
    
}
.user-image{
    margin-top: -50px;/*for making img out a little from the box*/
    margin-bottom: 30px ; /*for keeping little spcae between pictue and input fields*/
}
.user-image img{ /*setting values for original image*/
    height: 100px; 
    width: 100px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #848484;/*for shadow efect around the box*/
}
.form-group{
    margin-bottom: 25px;
}
.form-group input{ /*for input boxes*/
    height: 42px;
    font-size: 18px;
    box-shadow: 0px 0px 3px #848484;/*for shadow efect around the box*/
    padding-left: 54px; /*moving the text fields to right*/
}
.form-group::before{ /*for username icon*/
    font-family: "Font Awesome\ 5 free";
    content: "\f2bd"; /*derived from font awesome website*/
    position: absolute;
    font-size: 22px;
    color:  rgb(46, 42, 38); /*color of icon*/
    left: 28px;
    padding-top:4px; 
}
.form-group:last-of-type::before{ /*for password icon*/
    content: "\f023";
}
#btnforlogin{ /*for login button*/
    height: 40px;
    margin: 5px 0px 20px;
    background: rgb(58, 55, 52);
    color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3px #848484;/*for shadow efect around the box*/
}
#btnforlogin:hover, #btnforlogin:focus{ /*for hover effect on login button*/
    background-color: rgb(29, 27, 25);
}
.forget{ /*forget password*/
    margin-bottom: 20px; /*for some space at bottom of link*/
}
.signin{
    margin-bottom: 30px;
}
.forget a,.signin a{
    color: rgb(255, 255, 255);
}