html{
  width:100%;
  height:100%;
  float:left;
  background-color:white;
}

form{
  width:30%;
  margin-left:35%;
  margin-top:10%;
  background-color:#fafafa;
  float:left;
  box-shadow:0 0 8px 0 rgba(0,0,0,.3);


}

form i{
  font-size:30px;
  padding:3%;
  float:left;
  width:50px;
  color:white;
  background-color:#ffcc80;
  clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}

form a{
  font-size:26px;
  margin:3%;
  float:left;
  font-family: 'Roboto', sans-serif;
  color:#757575;
}

logtop{
 background-color:#eeeeee;
  float:left;
  width:100%;
  height:auto;
}

@media only screen and (max-width: 1000px){
  form{
  width:70%;
  margin-left:15%;
  margin-top:15%;
}
}
  
  @media only screen and (max-width: 500px){
form i{
  width:94%;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
    
    form a{
  font-size:26px;
  margin:3%;
  float:left;
  font-family: 'Roboto', sans-serif;
  color:#757575;
}
} 
    form input{
      width:80%;
      margin-left:10%;
      float:left;
      font-size:20px;
      padding:2%;
      border:none;
      border-bottom:1.5px solid #757575;
      margin-top:5%;
      margin-bottom:2.5px;
      transition:0.3s
    }
    
    form input:focus{
      outline:none;
      border:none;
      border-bottom:4px solid #ffcc80;
      transition:0.3s;
      margin-bottom:0;
      background-color:#eeeeee;
    }

form button{
  width:80%;
  float:left;
  margin-left:10%;
  margin-top:5%;
  background-color:#e0e0e0;
  border:none;
  font-size:20px;
  padding:2%;
}

form tag{
  float:left;
  width:94%;
  height:auto;
  padding:3%;
  background-color:#f1f1f1;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  margin-top:5%;
  cursor:pointer;
}

form p{
  width:100%;
  text-align:center;
  color:red;
  padding-top:1%;
  float:left;
  
}