#envelope{background-color:#f9c5c8;border-bottom-right-radius:6px;border-bottom-left-radius:6px;width:280px;height:180px;margin:150px auto;position:relative;box-shadow:0 4px 20px #0003}.front{z-index:3;width:0;height:0;position:absolute}.flap{transform-origin:top;pointer-events:none;border:140px solid #0000;border-top:98px solid #f33;border-bottom-width:82px}.pocket{border:140px solid #f99;border-top:90px solid #0000;border-bottom:90px solid #fd8787;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.letter{background-color:#f9c5c8;border-radius:6px;width:90%;height:90%;margin-left:auto;margin-right:auto;position:relative;top:5%;box-shadow:0 2px 26px #0000001f}.letter:after{content:"";background-image:linear-gradient(#fff0 25%,#efd7efb3 55%,#eed7ef 100%);position:absolute;inset:0}.words{background-color:#fdb7ba;width:80%;height:14%;position:absolute;left:10%}.words.line1{width:20%;height:7%;top:15%}.words.line2{top:30%}.words.line3{top:50%}.words.line4{top:70%}.open .flap{z-index:1;transition:transform .4s,z-index .6s;transform:rotateX(180deg)}.close .flap{z-index:5;transition:transform .4s .6s,z-index 1s;transform:rotateX(0)}.close .letter{z-index:1;transition:transform .4s,z-index 1s;transform:translateY(0)}.open .letter{z-index:2;transition:transform .4s .6s,z-index .6s;transform:translateY(-60px)}.hearts{z-index:2;position:absolute;top:90px;left:0;right:0}.heart{pointer-events:none;position:absolute;bottom:0;right:10%}.heart:before,.heart:after{content:"";transform-origin:0 100%;pointer-events:none;width:50px;height:80px;position:absolute;top:0;left:50px;transform:rotate(-45deg)}.heart:after{transform-origin:100% 100%;left:0;transform:rotate(45deg)}.close .heart{opacity:0;animation:none}.a1{opacity:1;-webkit-animation-name:slideUp,sideSway;-moz-animation-name:slideUp,sideSway;-webkit-animation-duration:4s,2s;-moz-animation-duration:4s,2s;-webkit-animation-timing-function:linear,ease-in-out;-moz-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:1,4;-moz-animation-iteration-count:1,4;-webkit-animation-direction:normal,alternate;-moz-animation-direction:normal,alternate;-webkit-animation-play-state:running,running;-moz-animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards;animation-timeline:auto,auto;left:20%;transform:scale(.6)}.a2{opacity:1;-webkit-animation-name:slideUp,sideSway;-moz-animation-name:slideUp,sideSway;-webkit-animation-duration:5s,4s;-moz-animation-duration:5s,4s;-webkit-animation-timing-function:linear,ease-in-out;-moz-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:1,2;-moz-animation-iteration-count:1,2;-webkit-animation-direction:normal,alternate;-moz-animation-direction:normal,alternate;-webkit-animation-play-state:running,running;-moz-animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards;animation-timeline:auto,auto;left:55%;transform:scale(1)}.a3{opacity:1;-webkit-animation-name:slideUp,sideSway;-moz-animation-name:slideUp,sideSway;-webkit-animation-duration:7s,2s;-moz-animation-duration:7s,2s;-webkit-animation-timing-function:linear,ease-in-out;-moz-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:1,6;-moz-animation-iteration-count:1,6;-webkit-animation-direction:normal,alternate;-moz-animation-direction:normal,alternate;-webkit-animation-play-state:running,running;-moz-animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards;animation-timeline:auto,auto;left:10%;transform:scale(.8)}@keyframes slideUp{0%{top:0}to{top:-600px}}@keyframes sideSway{0%{margin-left:0}to{margin-left:50px}}body{background-color:#f7d9da}.envlope-wrapper{height:380px}.reset{text-align:center}.reset button{-webkit-appearance:none;color:#ff5757;text-transform:uppercase;cursor:pointer;background-color:#0000;border:2px solid #ff5757;border-radius:4px;min-width:120px;margin:5px;padding:10px;font-size:14px;font-style:normal;font-weight:800;line-height:1em;text-decoration:none;transition:all .1s linear;display:inline-block}.reset button:hover{color:#a10000;background-color:#fc9d9d}