body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#fae1dd}.container{position:relative}.valentines{position:relative;top:50px;cursor:pointer}.valentines.shake{animation:shake-animation 1s 3 ease-in-out}.valentines.shake-1{animation:shake-animation-1 1s 3 ease-in-out}.valentines.shake-2{animation:shake-animation-2 1s 3 cubic-bezier(.36,.07,.19,.97)}.seal.shake{animation:shake-animation 1s 3 ease-in-out}.seal.shake-1{animation:shake-animation-1 1s 3 ease-in-out}.seal.shake-2{animation:shake-animation-2 1s 3 cubic-bezier(.36,.07,.19,.97)}@keyframes up{0%,to{transform:translateY(0)}50%{transform:translateY(-30px)}}@keyframes shake-animation{0%{transform:translate(0)}10%{transform:translate(-5px)}20%{transform:translate(5px)}30%{transform:translate(-5px)}40%{transform:translate(5px)}50%{transform:translate(-5px)}60%{transform:translate(5px)}70%{transform:translate(-5px)}80%{transform:translate(5px)}90%{transform:translate(-5px)}to{transform:translate(0)}}@keyframes shake-animation-1{0%{transform:translate(0)}10%{transform:translate(-10px)}20%{transform:translate(10px)}30%{transform:translate(-10px)}40%{transform:translate(10px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-10px)}80%{transform:translate(10px)}90%{transform:translate(-10px)}to{transform:translate(0)}}@keyframes shake-animation-2{0%{transform:translate(0)}10%{transform:translate(-10px)}20%{transform:translate(10px)}30%{transform:translate(-10px)}40%{transform:translate(10px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-10px)}80%{transform:translate(10px)}90%{transform:translate(-10px)}to{transform:translate(0)}}.envelope{position:relative;width:340px;height:240px;background-color:#f08080;box-shadow:-5px -20px 100px #0006}.envelope:before{background-color:#f08080;content:"";position:absolute;width:240px;height:240px;transform:rotate(45deg);top:-120px;left:50px;border-radius:30px 0 0}.envelope.closed:before{width:340px;height:240px;clip-path:polygon(0% 0%,100% 0%,50% 50%);top:0;z-index:999;left:0;border-radius:0;transform:none}.card{position:absolute;background-color:#eae2b7;width:320px;height:200px;top:0;left:10px;transition:top .6s ease,height .6s ease}.seal{position:absolute;top:142px;left:150px;width:40px;height:40px;z-index:9999}.card.first.opened{top:-190px;height:350px}.card.second.opened{top:-210px;height:360px}.card.third.opened{top:-230px;height:370px}.card.third,.card.second{box-shadow:0 0 5px #000000bf}.card.second{top:20px}.card.third{top:40px}.header{font-family:Pacifico,serif;font-size:14px;margin-left:10px;text-align:center;color:#003049}.text{display:flex;flex-direction:column;margin-left:10px}.text span{text-decoration:underline;font-family:Pacifico,serif;font-size:12px}.heart{background-color:#d62828;display:inline-block;height:30px;margin:0 10px;position:relative;top:110px;left:105px;transform:rotate(-45deg);width:30px}.heart:before,.heart:after{content:"";background-color:#d62828;border-radius:50%;height:30px;position:absolute;width:30px}.heart:before{top:-15px;left:0}.heart:after{left:15px;top:0}.hearts{position:absolute;z-index:9999}.one,.two,.three,.four,.five,.six,.seven,.eight{background-color:red;display:inline-block;height:10px;margin:0 10px;position:relative;transform:rotate(-45deg);width:10px;top:-20px}.one:before,.one:after,.two:before,.two:after,.three:before,.three:after,.four:before,.four:after,.five:before,.five:after,.six:before,.six:after,.seven:before,.seven:after,.eight:before,.eight:after{content:"";background-color:red;border-radius:50%;height:10px;position:absolute;width:10px}.one:before,.two:before,.three:before,.four:before,.five:before,.six:before,.seven:before,.eight:before{top:-5px;left:0;z-index:-1}.one:after,.two:after,.three:after,.four:after,.five:after,.six:after,.seven:after,.eight:after{left:5px;top:0;z-index:-1}.one{left:10px;animation:heart 1.5s infinite ease-out}.two{left:25px;animation:heart 2s infinite ease-out}.three{left:40px;animation:heart 1.5s infinite ease-out}.four{left:55px;animation:heart 1.8s infinite ease-out}.five{left:70px;animation:heart 1.7s infinite ease-out}.six{left:85px;animation:heart 1.7s infinite ease-out}.seven{left:100px;animation:heart 1.9s infinite ease-out}.eight{left:105px;animation:heart 1.5s infinite ease-out}@keyframes heart{0%{transform:translateY(0) rotate(-45deg) scale(.3);opacity:1;z-index:0}1%{z-index:9999}to{transform:translateY(-220px) rotate(-45deg) scale(1.3);opacity:.5}}.front{width:340px;height:240px;background:#f8ad9d;z-index:100;position:absolute;top:0;left:0}.front.left{clip-path:polygon(0% 0%,0% 100%,50% 50%)}.front.right{clip-path:polygon(100% 100%,100% 0%,50% 50%)}.front.bottom{clip-path:polygon(100% 100%,0% 100%,50% 50%)}.shadow{position:absolute;width:360px;height:25px;border-radius:50%;background-color:#0000004d;top:325px;left:-10px;z-index:-1}@keyframes scale{0%,to{transform:scaleX(1)}50%{transform:scaleX(.85)}}