*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background:linear-gradient(135deg, #00b4d8, #0077b6);
  color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
}
.login{
  background: #fff;
  padding: 20px;
  color:#333;
  width:100%;
  border-radius: 10px;
  max-width: 500px;
}
input{
  border-width:1px;
  border-style:solid;
  border-radius:10px;
  font-size: 16px;
  padding: 14px 12px;
  outline: none;
  background: transparent;
  width:100%;
}
h1{
  text-align: center;
  color: #0077b6;
  margin-bottom: 40px;
  font-size: 50px;
}
.input-group{
  position:relative;
  margin-bottom: 24px;
}
button{
  width:100%;
  color:white;
  background-color:  #0077b6;
  border:none;
  height: 40px;
  border-radius:10px;
  font-size: 20px;
}
.error{
  color:red;
  font-size:15px;
  text-align:center;
  margin:10px auto;
}
.success{
  color:green;
  font-size:15px;
  text-align:center;
  margin:10px auto;
}
label{
  position:absolute;
  background:white;
  color:#888;
  top:50%;
  left:12px;
  transform: translateY(-50%);
  padding:0 5px;
  transition: 0.5s;
}
 .input-group input:focus + label,
    .input-group input:not(:placeholder-shown) + label {
      top: -3px;
      left: 10px;
      font-size: 15px;
      color: #0077b6;
    }