body{
  background-color:teal;
}

.login{
  text-decoration: underline;
  display:inline-block;
  width:100%;
  text-align: center;
  padding-top:100px;
  font-size:40px;
}

.form-group{
  padding-top: 25px;
}

.adjustments{
  padding-top: 100px;
  padding-bottom: 110px;
}

.wrapper{
  width: 400px;
  height: 100%;
  background-color: rgb(100, 211, 252);
  border: 5px solid White;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }

 /*instruction to the login*/
 .instruction{
   display:inline-block;
   width:100%;
   text-align: center;
 }

 .background{
  /* The Background Image */
  background-image:url("../images/login/login.png");
    min-height: 550px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 }

 .background_cover{
   position:relative;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 115, 153,0.3)
 }

 /*headings of the login page*/
 .login_headings{
   font-weight: bold;
 }

 /*text input box*/
 .form-control{
  transition: background-color 1s, border-color 1s, color 1s;
  -ms-transition: background-color 1s, border-color 1s, color 1s;
  -webkit-transition: background-color 1s, border-color 1s, color 1s;
  -moz-transition: background-color 1s, border-color 1s, color 1s;
  -o-transition: background-color 1s, border-color 1s, color 1s;
  
  border-radius: 5px;
  color: rgb(51, 204, 204);
  background-color: rgb(0, 51, 102);
  border-color: rgb(51, 204, 204);
  padding: 3px 10px;
 }

 /*text inputs when highlighted*/
 .form-control:focus{
   transition: background-color 1s, border-color 1s, color 1s;
   -ms-transition: background-color 1s, border-color 1s, color 1s;
   -webkit-transition: background-color 1s, border-color 1s, color 1s;
   -moz-transition: background-color 1s, border-color 1s, color 1s;
   -o-transition: background-color 1s, border-color 1s, color 1s;
   
   background-color:rgb(51, 204, 204);
   border-color: rgb(0, 51, 102);
   color: rgb(0, 51, 102);
  
 }

 /*login button*/
 .login_btn{
   transition: background-color 1s, border-color 1s;
   -ms-transition: background-color 1s, border-color 1s;
   -webkit-transition: background-color 1s, border-color 1s;
   -moz-transition: background-color 1s, border-color 1s;
   -o-transition: background-color 1s, border-color 1s;
   
   padding: 2px 30px;
   color: rgb(0, 51, 102);
   border-radius: 20px;
   background-color:rgb(100, 211, 252);
   border: 2px solid rgb(0, 51, 102);
   margin-bottom: 20px;
 }

 /*button on hover*/
 .login_btn:hover{
   transition: background-color 1s, border-color 1s;
   -ms-transition: background-color 1s, border-color 1s;
   -webkit-transition: background-color 1s, border-color 1s;
   -moz-transition: background-color 1s, border-color 1s;
   -o-transition: background-color 1s, border-color 1s;
   
   background-color: rgb(0,255,204);
   border-color: rgb(0,255,204);
   cursor: pointer;
 }

 /*placeholder*/
 ::placeholder{
   color:rgb(0,204,163);
   opacity:0.7;
 }

 /*link to signup page*/
 .join_link{
   transition: color 1s;
   -ms-transition: color 1s;
   -webkit-transition: color 1s;
   -moz-transition: color 1s;
   -o-transition: color 1s;
   
   text-decoration: none;
   color:rgb(0, 153, 153);
   display: block;
   text-align:center;
 }

 .join_link:hover{
   transition: color 1s;
    color: rgb(0, 255, 204);
 }

 .link_underline{
  transition: opactiy 1s, background-color 1s, transform 1s;
  -ms-transition: opactiy 1s, background-color 1s, transform 1s;
  -webkit-transition: opactiy 1s, background-color 1s, transform 1s;
  -moz-transition: opactiy 1s, background-color 1s, transform 1s;
  -o-transition: opactiy 1s, background-color 1s, transform 1s;
  
  opacity:0;
  padding: 1px 2px;
  background-color:rgb(0, 153, 153);
  height: 1px;
  width:2px;
  margin:auto;
  border-radius: 20px;
  position:relative;
 }

 .join_link:hover .link_underline{
   opacity:1;
   background-color:rgb(0, 255, 204);
   transform: scaleX(17);
   -ms-transform: scaleX(17);
   -webkit-transform: scaleX(17);
   -moz-transform: scaleX(17);
   -o-transform: scaleX(17);
   
   transition: opactiy 1s, background-color 1s, transform 1s;
   -ms-transition: opactiy 1s, background-color 1s, transform 1s;
   -webkit-transition: opactiy 1s, background-color 1s, transform 1s;
   -moz-transition: opactiy 1s, background-color 1s, transform 1s;
   -o-transition: opactiy 1s, background-color 1s, transform 1s;

 }
 
 
 
 
/*checkbox container*/
 .checkbox_container{
   display: block;
   position: relative;
   padding: 10px;
 }

 /*custom checkmark*/
 .checkmark{
   transition: background-color 0.5s, opacity 1s;
   -ms-transition: background-color 0.5s, opacity 1s;
   -webkit-transition: background-color 0.5s, opacity 1s;
   -moz-transition: background-color 0.5s, opacity 1s;
   -o-transition: background-color 0.5s, opacity 1s;
   
   padding: 10px;
   background-color: rgb(0, 51, 102);
   display:inline-block;
   
   transform:translate(0,5px);
   -ms-transform:translate(0,5px);
   -webkit-transform:translate(0,5px);
   -moz-transform:translate(0,5px);
   -o-transform:translate(0,5px);
 }

 /*the hidden checkbox*/
 .checkbox_hidden{
   display:block;
   opacity:0;
 }

 /*when hovering over the checkbox option*/
 .checkbox_container:hover .checkmark{
  background-color:rgb(0, 115, 230);
  transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
 }

 /*have a pointer cursor when hovering over the checkbox or its heading*/
 .checkbox_container:hover{
   cursor:pointer;
 }

 /*change colour of the checkmark box when input is checked*/
 .checkbox_hidden:checked ~ .checkmark{
  background-color:rgb(51, 204, 204);
  transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  
 }

 /*add a check symbol when the checkbox is checked*/
 .checkmark::after{
   content:"";
   position: absolute;
   opacity:0;
   padding:3px;
   border: solid rgb(255,255,255);
   top:1.5px;
   left: 7px;
   height:6px;
   transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -o-transform:rotate(45deg);
   border-width: 0 2px 2px 0;
 }

 /*show the check mark symbol when hidden checkbox is checked*/
 .checkbox_hidden:checked ~.checkmark::after{
   opacity:1;
   transition:opacity 1s;
   -ms-transition:opacity 1s;
   -webkit-transition:opacity 1s;
   -moz-transition:opacity 1s;
   -o-transition:opacity 1s;
 }
 
 
 
 /*error message*/
 .error_message{
   color:rgb(255, 71, 26);
 }