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

body{

    font-family:Poppins,sans-serif;

    overflow-x:hidden;

    overflow-y:auto;

}

.background{

     width:100%;

    min-height:100vh;

    padding:20px;

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

    background:linear-gradient(-45deg,
    #ff9a9e,
    #fad0c4,
    #fbc2eb,
    #a18cd1);

    background-size:400% 400%;

    animation:bgMove 10s infinite alternate;

}

@keyframes bgMove{

0%{background-position:left;}

100%{background-position:right;}

}

.login-card{

     width:90%;

    max-width:380px;

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 40px rgba(0,0,0,.25);

}

.login-card h1{

    font-family:'Great Vibes',cursive;

    color:white;

    font-size:58px;

    margin-bottom:10px;

}

.login-card p{

    color:white;

    margin-bottom:25px;

}

input{

    width:100%;

    padding:14px;

    margin:12px 0;

    border:none;

    outline:none;

    border-radius:12px;

    font-size:16px;

}

button{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:12px;

    font-size:18px;

    background:#ff4b91;

    color:white;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:scale(1.05);

    background:#ff2f7d;

}

#error{

    margin-top:15px;

    color:yellow;

    font-weight:bold;

}
.hearts{
 pointer-events:none;

position:absolute;

width:100%;

height:100%;

overflow:hidden;

}

.hearts span{

position:absolute;

font-size:25px;

animation:float 10s linear infinite;

opacity:.6;

}

@keyframes float{

0%{

transform:translateY(100vh);

}

100%{

transform:translateY(-100px);

}

}
@media(max-width:768px){

.login-card{

width:95%;

padding:25px;

}

.login-card h1{

font-size:42px;

}

.login-card p{

font-size:15px;

}

input{

padding:12px;

font-size:15px;

}

button{

padding:12px;

font-size:16px;

}

}