@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

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

body{

    font-family:"Inter",sans-serif;

    height:100vh;

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

    overflow:hidden;

    background:
        radial-gradient(circle at 15% 25%,rgba(140,170,255,.45),transparent 30%),
        radial-gradient(circle at 85% 80%,rgba(180,150,255,.35),transparent 30%),
        linear-gradient(135deg,#eef4ff,#dfeeff,#edf5ff);

    position:relative;

}

/* Floating Glass Orbs */

body::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    left:-80px;
    top:120px;

    background:rgba(255,255,255,.45);

    filter:blur(20px);

    animation:float1 8s ease-in-out infinite;

}

body::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-60px;
    bottom:80px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    filter:blur(15px);

    animation:float2 10s ease-in-out infinite;

}

.login-card{

    width:480px;

    padding:60px;

    border-radius:32px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.35);

    box-shadow:

        0 20px 80px rgba(20,40,120,.15),

        inset 0 0 1px rgba(255,255,255,.7),

        inset 0 1px 0 rgba(255,255,255,.4);

    position:relative;

    overflow:hidden;

}

.login-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:rgba(255,255,255,.18);

    border-radius:50%;

    top:-80px;
    right:-80px;

    filter:blur(10px);

}

.login-card h2{

    font-family:"Poppins",sans-serif;

    font-size:40px;

    text-align:center;

    color:#1f2d4d;

    margin-bottom:12px;

}

.subtitle{

    text-align:center;

    color:#6d7ea7;

    font-size:16px;

    margin-bottom:40px;

}

input{

    width:100%;

    height:60px;

    border:none;

    outline:none;

    margin-bottom:22px;

    border-radius:18px;

    padding:0 22px;

    font-size:16px;

    background:rgba(255,255,255,.45);

    color:#26334d;

    transition:.35s;

}

input::placeholder{

    color:#7687aa;

}

input:focus{

    background:rgba(255,255,255,.65);

    box-shadow:

        0 0 0 4px rgba(100,120,255,.18);

}

button{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    font-size:18px;

    font-weight:600;

    color:white;

    cursor:pointer;

    background:linear-gradient(135deg,#4b6cff,#6a5cff);

    box-shadow:

        0 15px 35px rgba(72,90,255,.35);

    transition:.35s;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 22px 40px rgba(72,90,255,.5);

}

#error{

    margin-top:18px;

    text-align:center;

    color:#d32f2f;

    font-weight:500;

}

.footer{

    margin-top:30px;

    text-align:center;

    color:#7b87a7;

    font-size:14px;

}

@keyframes float1{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }

}

@keyframes float2{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(25px);
    }

}

@media(max-width:600px){

.login-card{

    width:92%;
    padding:40px;

}

.login-card h2{

    font-size:30px;

}

}