#heart-button,body{justify-content:center}#heart-button,.particle{display:flex;color:pink}body{margin:0;overflow:hidden;background-color:#000;display:flex;align-items:center;height:100vh;font-family:sans-serif;position:relative}#heart-button{position:absolute;bottom:3vw;left:3vw;width:15vw;height:15vw;background-color:transparent;border:none;cursor:pointer;z-index:10;opacity:.8;font-size:8vw;text-shadow:0 0 10px pink;transition:transform .3s,text-shadow .3s,opacity .3s;align-items:center}#heart-button:hover{transform:scale(1.1);text-shadow:0 0 15px pink;opacity:1}#heart-button:focus{outline:0}#heart-container{position:relative;width:80vw;height:80vw;max-width:300px;max-height:300px;transition:transform .6s}.particle{position:absolute;width:auto;height:auto;font-size:2vw;text-shadow:0 0 8px pink;opacity:.7;animation:1.5s linear infinite windMotionText;justify-content:center;align-items:center;white-space:nowrap;transition:animation .5s,font-size .5s,text-shadow .5s,color .5s,opacity .5s}@keyframes windMotionText{0%,100%{transform:translate(0,0) rotate(0) scale(1);opacity:.7;font-size:2vw;text-shadow:0 0 8px pink;color:pink}10%{transform:translate(8px,-5px) rotate(20deg) scale(1.1);opacity:.9}25%{transform:translate(-12px,10px) rotate(-30deg) scale(.9);opacity:.6}40%{transform:translate(5px,15px) rotate(10deg) scale(1.2);opacity:.8}60%{transform:translate(-8px,-12px) rotate(-25deg) scale(.8);opacity:.5}75%{transform:translate(15px,-3px) rotate(35deg) scale(1.3);opacity:1}90%{transform:translate(-3px,8px) rotate(-15deg) scale(.7);opacity:.6}}@keyframes heartbeatAnimation{0%,100%{transform:translateY(0) scale(1);opacity:.7;font-size:2vw;text-shadow:0 0 8px pink;color:pink}50%{transform:translateY(-10px) scale(1.15);opacity:1}}.heartbeatAnimation{animation:1.2s ease-in-out infinite alternate heartbeatAnimation}@keyframes dotAnimation{0%,100%{font-size:1vw;text-shadow:0 0 10px pink;color:pink;opacity:.4}50%{font-size:.5vw;text-shadow:0 0 8px pink;opacity:.8}}.dotAnimation{animation:2s ease-in-out infinite alternate dotAnimation,10s linear forwards dotFillHeart,4s ease-in-out 10s infinite alternate dotHeartbeatEffect;font-size:1vw;text-shadow:0 0 10px pink;color:pink;opacity:.4}@keyframes dotFillHeart{0%{opacity:.4;font-size:1vw}100%{opacity:.8;font-size:1vw}}@keyframes dotHeartbeatEffect{0%,100%{transform:scale(1)}50%{transform:scale(.3)}}
