*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Segoe UI, sans-serif;

background:#e6ebf3;

display:flex;
align-items:center;
justify-content:center;

min-height:100vh;

padding:20px;
}

/* container */

.login-container{
width:100%;
max-width:340px;
}

/* card */

.login-card{

background:#e6ebf3;

border-radius:25px;

padding:35px 28px;

box-shadow:
10px 10px 25px #c8ccd4,
-10px -10px 25px #ffffff;

transition:0.3s;
}

.login-card:hover{
transform:translateY(-3px);
}

/* header */

.login-header{
text-align:center;
margin-bottom:25px;
}

.login-header h2{
font-size:22px;
color:#40465f;
margin-bottom:5px;
}

.login-header p{
font-size:14px;
color:#8c93a8;
}

/* icon */

.icon-box{

width:60px;
height:60px;

margin:0 auto 15px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:#e6ebf3;

box-shadow:
6px 6px 14px #c8ccd4,
-6px -6px 14px #ffffff;
}

.icon-box svg{
width:26px;
stroke:#6b7280;
fill:none;
stroke-width:2;
}

/* inputs */

.input-box{

position:relative;

margin-bottom:18px;

background:#e6ebf3;

border-radius:12px;

box-shadow:
inset 6px 6px 12px #c8ccd4,
inset -6px -6px 12px #ffffff;
}

.input-box input{

width:100%;

padding:14px 16px;

border:none;
outline:none;

background:transparent;

font-size:14px;

color:#40465f;
}

.input-box label{

position:absolute;

left:16px;
top:50%;

transform:translateY(-50%);

font-size:14px;

color:#9aa1b5;

pointer-events:none;

transition:0.2s;
}

.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label{

top:-8px;

font-size:11px;

background:#e6ebf3;

padding:0 5px;

color:#5a6178;
}

/* button */

.login-btn{

width:100%;

margin-top:10px;

padding:14px;

border:none;

border-radius:12px;

font-size:15px;
font-weight:600;

cursor:pointer;

color:#40465f;

background:#e6ebf3;

box-shadow:
6px 6px 16px #c8ccd4,
-6px -6px 16px #ffffff;

transition:0.25s;
}

.login-btn:hover{

transform:translateY(-2px);

box-shadow:
8px 8px 20px #c8ccd4,
-8px -8px 20px #ffffff;
}

.login-btn:active{

transform:translateY(0);

box-shadow:
inset 4px 4px 8px #c8ccd4,
inset -4px -4px 8px #ffffff;
}

/* mobile */

@media(max-width:480px){

.login-card{

padding:28px 20px;

border-radius:20px;
}

.login-header h2{
font-size:20px;
}

}