body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#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:#00334c;box-shadow:0 4px 20px rgba(0,0,0,.2)}.front{position:absolute;width:0;height:0;z-index:3}.flap{border-color:#00334c transparent transparent;border-width:98px 140px 82px;transform-origin:top;pointer-events:none}.flap,.pocket{border-style:solid}.pocket{border-color:transparent #0077b2 #006da3;border-width:90px 140px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.letter{position:relative;background-color:#fff;width:90%;margin-left:auto;margin-right:auto;height:90%;top:5%;border-radius:6px;box-shadow:0 2px 26px rgba(0,0,0,.12)}.letter:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background-image:linear-gradient(180deg,hsla(0,0%,100%,0) 25%,rgba(215,227,239,.7) 55%,#d7e3ef)}.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(0deg);transition:transform .4s ease .6s,z-index 1s;z-index:5}.close .letter{transform:translateY(0);transition:transform .4s ease,z-index 1s;z-index:1}.open .letter{transform:translateY(-60px);transition:transform .4s ease .6s,z-index .6s;z-index:2}.hearts{position:absolute;top:90px;left:0;right:0;z-index:2}.heart{bottom:0;right:10%}.heart,.heart:after,.heart:before{position:absolute;pointer-events:none}.heart:after,.heart:before{content:"";left:50px;top:0;width:50px;height:80px;background:#d00000;border-radius:50px 50px 0 0;transform:rotate(-45deg);transform-origin:0 100%}.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}.close .heart{opacity:0;animation:none}.a1{left:20%;transform:scale(.6);-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}.a1,.a2{opacity:1}.a2{left:55%;transform:scale(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%;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}@keyframes slideUp{0%{top:0}to{top:-600px}}@keyframes sideSway{0%{margin-left:0}to{margin-left:50px}}body{background-color:#a8e2ff}.envlope-wrapper{height:380px}.reset{text-align:center}.reset button{font-weight:800;font-style:normal;transition:all .1s linear;-webkit-appearance:none;background-color:transparent;border:2px solid #0077b2;border-radius:4px;color:#0077b2;display:inline-block;font-size:14px;text-transform:uppercase;margin:5px;padding:10px;line-height:1em;text-decoration:none;min-width:120px;cursor:pointer}.reset button:hover{background-color:#0077b2;color:#fff}body{overflow:hidden}.container{top:50px;margin-right:40px;display:flex;justify-content:flex-end;align-items:center}.container,.headphones{position:relative}.head{width:15vmin;height:15vmin;border-color:#2d3047 #2d3047 transparent transparent;border-style:solid;border-width:1.5vmin;transform:rotate(-45deg)}.ear,.head{border-radius:100%}.ear{position:absolute;width:2.5vmin;height:7.5vmin;top:8.25vmin;left:-5vmin;border-left:5vmin solid #f27059}.ear:after,.ear:before{position:absolute;content:""}.ear:before{width:2.5vmin;height:7.5vmin;top:0;left:15.7vmin;border-radius:100%;border-right:5vmin solid #f27059}.ear:after{width:1.5vmin;height:7.5vmin;background:#2d3047;border-radius:100px;box-shadow:16.6vmin 0 0 #2d3047}.letterHeartContainer{top:70px;position:relative}.letterOverlay{font-family:"Emilys Candy",cursive;width:80%;max-width:400px;height:80vh;max-height:600px;background-color:#fff;border-radius:6px;box-shadow:0 2px 26px rgba(0,0,0,.12);transition:opacity 1s ease-out;opacity:0;padding:10px;font-size:22px}.displayLetter{opacity:1;z-index:10}.letterContainer{position:absolute;top:0;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}.letterHeart{pointer-events:none}.letterHeart:after,.letterHeart:before{position:absolute;content:"";left:40px;top:0;width:40px;height:64px;background:#d00000;border-radius:40px 40px 0 0;transform:rotate(-45deg);transform-origin:0 100%;pointer-events:none}.letterHeart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
/*# sourceMappingURL=main.415099f9.chunk.css.map */