body {
    margin: 0px;
}

.login-page{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 20px;
    position:relative;
    overflow:hidden;
}

/* Floating Animation */
.login-page::before,
.login-page::after{
    content:'';
    position:absolute;
    border-radius:50%;
    background:linear-gradient(
        45deg,
        rgba(102,126,234,.3),
        rgba(118,75,162,.3)
    );
    animation:float 8s ease-in-out infinite;
}

.login-page::before{
    width:220px;
    height:220px;
    top:-80px;
    left:-80px;
}

.login-page::after{
    width:180px;
    height:180px;
    bottom:-60px;
    right:-60px;
    animation-delay:3s;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
}

/* Card */
.login-card{
    width:100%;
    max-width:420px;
    padding:40px;
    border-radius:25px;
    background:#fff;
    box-shadow:
        0 15px 35px rgba(0,0,0,.1),
        0 5px 15px rgba(0,0,0,.05);
    position:relative;
    z-index:2;
    animation:slideUp .8s ease;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.login-card h2{
    text-align:center;
    color:#333;
    margin-bottom:25px;
    font-size:30px;
    font-weight:700;
}

/* Error Message */
.message{
    text-align:center;
    margin-bottom:15px;
    color:#ff4d4d;
    font-weight:500;
}

/* Inputs */
.input-group{
    margin-bottom:20px;
}

.input-group input{
    width:90%;
    padding:15px 18px;
    border:2px solid #e5e5e5;
    border-radius:12px;
    outline:none;
    font-size:15px;
    transition:.4s;
    background:#fafafa;
}

.input-group input:focus{
    border-color:#667eea;
    background:#fff;
    box-shadow:0 0 15px rgba(102,126,234,.25);
    transform:translateY(-2px);
}

/* Button */
.login-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.login-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(102,126,234,.35);
}

.login-btn:active{
    transform:scale(.98);
}

/* Button Shine Effect */
.login-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
    transition:.6s;
}

.login-btn:hover::before{
    left:100%;
}

/* Register Link */
.register-link{
    text-align:center;
    margin-top:20px;
    color:#555;
}

.register-link a{
    color:#667eea;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.register-link a:hover{
    color:#764ba2;
    text-decoration:underline;
}

/* Mobile */
@media(max-width:480px){

    .login-card{
        padding:30px 20px;
    }

    .login-card h2{
        font-size:24px;
    }

}