body{
margin:0;
padding:0;
background:#0e6cc4;
font-family:Arial;
overflow:hidden;
}

/* waves */

.box{
position:fixed;
top:0;
left:0;
transform:rotate(80deg);
}

.wave{
position:absolute;
top:3%;
left:10%;
width:1500px;
height:1300px;
background:#0af;
opacity:.4;
border-radius:43%;
animation:drift 7000ms infinite linear;
}

.wave.-two{
background:black;
opacity:.1;
animation:drift 3000ms infinite linear;
}

.wave.-three{
background:#77daff;
animation:drift 7500ms infinite linear;
}

@keyframes drift{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}
/* login card */

.card{
background:rgba(255,255,255,.85);
width:420px;
padding:35px 40px;
border-radius:25px;
text-align:center;
margin:180px auto;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* logo */

.logo{
width:140px;
height:140px;
display:block;
margin:0 auto 15px;
}

.card h1{
margin-bottom:25px;
color:#314fd6;
}

/* form layout */

.login-form{
text-align:left;
margin-bottom: 20px;
}

.input-group{
margin-bottom:18px;
}

.input-group label{
display:block;
font-weight:bold;
margin-bottom:5px;
color:#333;
}

/* input */

input{
width:100%;
height:38px;
border-radius:20px;
border:1px solid #ccc;
padding:0 12px;
outline:none;
font-size:14px;
}

/* button */

button{
width:100%;
height:42px;
border:none;
border-radius:25px;
margin-top:10px;
color:white;
font-size:16px;
cursor:pointer;

background:linear-gradient(
to right,
#845ec2,
#6475d3,
#4188db,
#2299dc,
#25a7d7
);
}

/* forgot password */

/* .forgot{
text-align:center;
margin-top:15px;
}

.forgot a{
text-decoration:none;
color:#314fd6;
font-size:14px;
} */

/* error */

.error{
color:red;
font-weight:bold;
text-align:center;
margin-bottom:10px;
}