.maindiv {
margin:100px auto;
text-align:center;
font-weight: bold;
padding-top:10px;
font-family:'ariel Serif',serif;
font-size:14px
}

.form_div {
width:100%;

}
form {
width:24%;
border:1px solid #aaa;
padding:10px 30px 15px;
 margin: 0 auto;
 border-style: none;
 border-radius: 6px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 background-color: white;
 font-size:14px;
}
form h2 {
font-size:20px;
}
@media only screen and (max-width: 450px) {
  form {
    width:80%;
    font-size:10px;
  }
}
.input {
width:70%;
height:36px;
border-radius:3px;
padding:3px 7px;
font-size:18px;
font-family:'Droid Serif',serif;
transition-duration: 0.1s;
 border: 1px solid #5c5b5a;
}
input[type=text].input:focus {
  outline: none;
  border: 1px solid #15ab3d;
}
input[type=password].input:focus {
  outline: none;
  border: 1px solid #15ab3d;
}

input[type=submit].show:focus {
  outline: none;
  border:2px solid #0d6e27;
}
#error {
font-size:10px;
color:#cc0000; 
margin-top:10px;
}

input.show {
color:white;
border:2px solid #15ab3d;
background-color: #15ab3d;
padding:5px 5px;
margin-left:50px;
font-weight: bold;
width:30%;
text-align:center;
font-size:16px;
border-radius: 6px;
transition-duration: 0.01s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
outline: none;
}
input.show:active {
outline: none;
border:2px solid #15ab3d;
border-radius: 16px;
}
@media only screen and (max-width: 450px) {
  
  input.show {
   margin-left:20px; 
  }  
}
p {
color:red;
text-align:center
}
span {
text-align:center;
color:green
}