.envelope-container{display:flex;justify-content:center;align-content:center;align-items:center;flex-direction:column;height:100vh;animation:float 3s ease-in-out infinite;perspective:1000px;margin-top:20px}.envelope:hover{transform:scale(1.05)}.envelope{position:relative;flex-wrap:wrap;display:flex;justify-content:center;background:#f2d0d8;height:350px;width:500px;z-index:0;border-radius:30px;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.envelope-top,.letter{position:absolute;top:0;z-index:2;height:0;width:0;border-left:220px solid transparent;border-right:220px solid transparent;border-top:200px solid #fcfcfc}.envelope-top{border-top:200px solid #d7b8c0;z-index:1}.envelope-bottom{position:absolute;bottom:0;z-index:3;height:0;width:0;border-left:220px solid transparent;border-right:220px solid transparent;border-bottom:180px solid #ffd8e2;filter:drop-shadow(0px -3px 5px rgba(0,0,0,.2))}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.flap{position:absolute;top:0;z-index:4;height:0;width:0;border-left:220px solid transparent;border-right:220px solid transparent;border-top:220px solid #ffe4eb;filter:drop-shadow(0px 8px 5px rgba(0,0,0,.2))}.heart{position:absolute;z-index:5;width:100px;height:100px;filter:drop-shadow(0px 8px 5px rgba(0,0,0,.2))}.p-style{font:bold;color:#fff;font-size:20px;text-align:center;margin-top:15px;text-shadow:0 0 5px #fff}.clicked{visibility:hidden}.flap-animating,.heart-animating{animation:flap-open 1.5s ease-in-out forwards;transform-origin:top}@keyframes flap-open{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}.heart-transform{animation:heart-move 1s ease-in-out forwards;animation-delay:.25s}.heart-wrapper{position:absolute;transform:translateY(150px);z-index:5;width:100px;height:100px}@keyframes heart-move{0%{transform:translateY(150px)}75%{z-index:3}to{transform:translateY(-150px);z-index:3}}@media(max-width:600px){.envelope{width:300px;height:200px}.envelope-bottom,.flap,.letter,.envelope-top{border-left:125px solid transparent;border-right:125px solid transparent}.envelope-bottom{border-bottom:115px solid #ffd8e2}.letter{border-top:125px solid #fcfcfc}.envelope-top{border-top:125px solid #d7b8c0}.flap{border-top:125px solid #ffe4eb}.heart{width:70px;height:70px}.heart-wrapper{transform:translateY(80px);width:70px;height:70px}@keyframes heart-move{0%{transform:translateY(80px)}75%{z-index:3}to{transform:translateY(-76px);z-index:3}}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh}#root{background:linear-gradient(150deg,#444186,#c41a64)}.app{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;position:relative}