.main-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#fff}.title{font-family:Lato,sans-serif;padding:0 24px}.envelope{position:relative;width:280px;height:180px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin-left:auto;margin-right:auto;top:150px;background-color:#a33ac2;box-shadow:0 4px 20px #0003}.front{position:absolute;width:0;height:0;z-index:3}.flap{border-left:140px solid transparent;border-right:140px solid transparent;border-bottom:82px solid transparent;border-top:98px solid #a33ac2;transform-origin:top;pointer-events:none}.pocket{border-left:140px solid #c887db;border-right:140px solid #c887db;border-bottom:90px solid #c37bd7;border-top:90px solid transparent;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.envelope-letter{position:relative;top:5%;width:90%;height:90%;margin-left:auto;margin-right:auto;background-color:#fff;border-radius:6px;box-shadow:0 2px 26px #0000001f}.letter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-height:95%;padding:24px;font-family:Briem Hand,cursive;background-color:#fff;border-radius:6px;box-shadow:0 2px 26px #0000001f;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;z-index:10}.letter ::-webkit-scrollbar{display:none}.letter.close{visibility:hidden}.letter .letter-section.header-section{margin-bottom:24px}.letter .letter-section.body-section p{margin:8px 0}.letter .letter-section.footer-section{margin-top:24px}@media only screen and (min-width: 1024px){.letter{width:50%}}.backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000018;z-index:9}.backdrop.close{visibility:hidden}.words{position:absolute;left:10%;width:80%;height:14%;background-color:#eeeff0}.words.line1{top:15%;width:20%;height:7%}.words.line2{top:30%}.words.line3{top:50%}.words.line4{top:70%}.open .flap{transform:rotateX(180deg);transition:transform .4s ease,z-index .6s;z-index:1}.close .flap{transform:rotateX(0);transition:transform .4s .6s ease,z-index 1s;z-index:5}.close .envelope-letter{transform:translateY(0);transition:transform .4s ease,z-index 1s;z-index:1}.open .envelope-letter{transform:translateY(-60px);transition:transform .4s .6s ease,z-index .6s;z-index:2}.hearts{position:absolute;top:90px;left:0;right:0;z-index:2}.heart{position:absolute;bottom:0;right:10%;pointer-events:none}.heart:before,.heart:after{position:absolute;content:"";left:50px;top:0;width:50px;height:80px;background:#d00000;border-radius:50px 50px 0 0;transform:rotate(-45deg);transform-origin:0 100%;pointer-events:none}.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}.close .heart{opacity:0;animation:none}.a1{left:20%;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:1;-webkit-animation:slideUp 4s linear 1,sideSway 2s ease-in-out 4 alternate;-moz-animation:slideUp 4s linear 1,sideSway 2s ease-in-out 4 alternate;animation-fill-mode:forwards;animation-delay:.7s}.a2{left:55%;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);opacity:1;-webkit-animation:slideUp 5s linear 1,sideSway 4s ease-in-out 2 alternate;-moz-animation:slideUp 5s linear 1,sideSway 4s ease-in-out 2 alternate;animation-fill-mode:forwards;animation-delay:.7s}.a3{left:10%;-webkit-transform:scale(.8);-moz-transform:scale(.8);transform:scale(.8);opacity:1;-webkit-animation:slideUp 7s linear 1,sideSway 2s ease-in-out 6 alternate;-moz-animation:slideUp 7s linear 1,sideSway 2s ease-in-out 6 alternate;animation-fill-mode:forwards;animation-delay:.7s}@-webkit-keyframes slideUp{0%{top:0}to{top:-600px}}@keyframes slideUp{0%{top:0}to{top:-1000px}}@-webkit-keyframes sideSway{0%{margin-left:0}to{margin-left:50px}}@keyframes sideSway{0%{margin-left:0}to{margin-left:50px}}.envelope-wrapper{height:380px}*{box-sizing:border-box;margin:0;padding:0}body{width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}