body{
    min-height:100vh;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background:linear-gradient(135deg,#FFE4F1,#E9D5FF);
    font-family:Arial,sans-serif;
    overflow:hidden;
}

.chat-box{
    position:relative;
    width:300px;
    text-align:center;
}

.message{
    display:flex;
    justify-content:center;
    align-items:center;
}

.message input{
    width:220px;
    padding:12px 20px;
    font-size:20px;
    text-align:center;
    border-radius:25px;
    border:none;
    border-top:3px solid #FF4FA3;
    border-bottom:3px solid #FF4FA3;
    outline:none;
    background:#fff;
}

.message input:focus{
    outline:none;
    box-shadow:none;
}

/* Emoji */

#error{
    display:inline-block;
    font-size:35px;
    margin-top:20px;
    min-height:40px;
    text-align:center;
    touch-action:none;
    user-select:none;
    cursor:grab;
}

/* Hearts */

.heart{
    position:absolute;
}

.h1{
    top:-35px;
    left:-40px;
    font-size:65px;
    animation:pulse1 4s ease-in-out infinite;
}

.h3{
    top:-30px;
    right:15px;
    font-size:35px;
    animation:pulse3 4s ease-in-out infinite;
}

.h4{
    top:-35px;
    right:-25px;
    font-size:45px;
    animation:pulse4 4s ease-in-out infinite;
}

.h5{
    bottom:-15px;
    left:-10px;
    font-size:45px;
    animation:pulse5 4s ease-in-out infinite;
}

.h6{
    bottom:-5px;
    right:-15px;
    font-size:55px;
    animation:pulse6 4s ease-in-out infinite;
}

@keyframes pulse1{
    0%,100%{
        transform:rotate(-20deg) scale(1);
    }
    50%{
        transform:rotate(-20deg) scale(1.15);
    }
}

@keyframes pulse3{
    0%,100%{
        transform:rotate(-15deg) scale(1);
    }
    50%{
        transform:rotate(-15deg) scale(1.15);
    }
}

@keyframes pulse4{
    0%,100%{
        transform:rotate(20deg) scale(1);
    }
    50%{
        transform:rotate(20deg) scale(1.15);
    }
}

@keyframes pulse5{
    0%,100%{
        transform:rotate(-40deg) scale(1);
    }
    50%{
        transform:rotate(-40deg) scale(1.15);
    }
}

@keyframes pulse6{
    0%,100%{
        transform:rotate(20deg) scale(1);
    }
    50%{
        transform:rotate(20deg) scale(1.15);
    }
}

/* Wrong Password Shake */

.shake{
    animation:emojiShake .5s ease-in-out;
}

@keyframes emojiShake{
    0%{transform:rotate(0deg);}
    20%{transform:rotate(-15deg);}
    40%{transform:rotate(15deg);}
    60%{transform:rotate(-15deg);}
    80%{transform:rotate(15deg);}
    100%{transform:rotate(0deg);}
}

/* Flower Bouquets */

.left-bouquet,
.right-bouquet{
    position:fixed;
    bottom:20px;
    display:none;
    animation:bouquetFloat 2s ease-in-out infinite;
    z-index:999;
}

.left-bouquet{
    left:20px;
}

.right-bouquet{
    right:20px;
}

.flower{
    position:absolute;
    width:28px;
    height:28px;
    border-radius:50%;
}

.flower1{
    background:#ff4fa3;
    left:0;
    top:0;
}

.flower2{
    background:#ff85c1;
    left:20px;
    top:-15px;
}

.flower3{
    background:#ffb3d9;
    left:40px;
    top:0;
}

.stem{
    position:absolute;
    width:6px;
    height:55px;
    background:#3cb371;
    left:30px;
    top:20px;
    border-radius:10px;
}

@keyframes bouquetFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}
.heart {
  will-change: transform;
  touch-action: none;
}