*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}


body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    radial-gradient(circle at top,#163b70,#020617);

    overflow:hidden;

}



/* background animation */

body::before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(120px);

    top:-100px;
    left:-100px;

    animation:move 8s infinite alternate;

}



body::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#0ea5e9;

    border-radius:50%;

    filter:blur(130px);

    bottom:-100px;
    right:-100px;

    animation:move2 10s infinite alternate;

}



@keyframes move{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(120px,80px);
    }

}



@keyframes move2{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-100px,-80px);
    }

}



/* card */


.login-card{

    position:relative;

    z-index:2;

    width:380px;

    padding:40px;

    background:

    rgba(255,255,255,0.08);


    backdrop-filter:blur(20px);


    border:1px solid rgba(255,255,255,0.15);


    border-radius:25px;


    box-shadow:

    0 25px 50px rgba(0,0,0,.4);


    animation:show .7s ease;

}



@keyframes show{

    from{

        opacity:0;

        transform:
        translateY(50px)
        scale(.9);

    }


    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}



.login-card h2{

    text-align:center;

    color:white;

    margin-bottom:30px;

    font-size:32px;

}



/* inputs */


.login-card input{

    width:100%;

    padding:15px 18px;

    margin-bottom:18px;


    background:

    rgba(255,255,255,.1);


    border:none;

    outline:none;


    border-radius:15px;


    color:white;


    font-size:16px;


    transition:.3s;

}



.login-card input::placeholder{

    color:#cbd5e1;

}



.login-card input:focus{

    background:
    rgba(37,99,235,.25);


    transform:
    translateY(-3px);


    box-shadow:

    0 0 20px rgba(37,99,235,.5);

}




/* button */


.login-card button{


    width:100%;

    padding:15px;


    border:none;


    border-radius:15px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );


    color:white;


    font-size:18px;


    cursor:pointer;


    transition:.3s;


}



.login-card button:hover{


    transform:
    translateY(-5px);


    box-shadow:

    0 15px 30px rgba(37,99,235,.5);


}



/* error */


.error{


    background:

    rgba(239,68,68,.2);


    color:#fecaca;


    padding:12px;


    border-radius:12px;


    margin-bottom:20px;


    text-align:center;

}




.login-card p{


    color:#cbd5e1;

    text-align:center;

    margin-top:20px;


}



.login-card a{

    color:#60a5fa;

    text-decoration:none;

}


.login-card a:hover{

    color:white;

}
.login-card input{

    width:100%;

    height:55px;

    padding:0 20px;


    margin-bottom:22px;


    background:rgba(15,23,42,0.7);


    border:1px solid rgba(96,165,250,0.25);


    border-radius:18px;


    outline:none;


    color:white;


    font-size:16px;


    transition:.4s;


    box-shadow:
    inset 0 0 15px rgba(0,0,0,.3);

}



.login-card input::placeholder{

    color:#94a3b8;

    transition:.3s;

}



.login-card input:hover{

    border-color:#3b82f6;

}



.login-card input:focus{

    border-color:#60a5fa;


    background:
    rgba(30,64,175,.35);


    transform:
    translateY(-3px);


    box-shadow:

    0 0 20px rgba(37,99,235,.45),
    inset 0 0 15px rgba(37,99,235,.2);


}



.login-card input:focus::placeholder{

    transform:translateX(10px);

    opacity:.5;

}