body{background-color:#f7daea;font-family:"byteBounce",sans-serif}header{text-align:center;align-items:center}header h1{color:#d74898}#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:#d74898;box-shadow:0 4px 20px rgba(0,0,0,.2)}.front{position:absolute;width:0;height:0;z-index:3}.flap{border-left:140px solid rgba(0,0,0,0);border-right:140px solid rgba(0,0,0,0);border-bottom:82px solid rgba(0,0,0,0);border-top:98px solid #d74898;transform-origin:top}.pocket{border-left:140px solid #e791bf;border-right:140px solid #e791bf;border-bottom:90px solid #f7daea;border-top:90px solid rgba(0,0,0,0);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, rgba(255, 255, 255, 0) 25%, rgba(215, 227, 239, 0.7) 55%, rgb(215, 227, 239) 100%)}.open .flap{transform:rotatex(180deg);transition:transform .4s ease,z-index .6s;z-index:1}.close .flap{transform:rotatex(0deg);transition:transform .4s .6s ease,z-index 1s;z-index:5}.close .letter{transform:translatey(0px);transition:transform .4s ease,z-index 1s;z-index:1}.open .letter{transform:translatey(-60px);transition:transform .4s .6s ease,z-index .6s;z-index:2}.envelope-wrapper{height:380px}.reset{text-align:center}.reset button{font-family:"byteBounce";transition:all .1s linear;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(0,0,0,0);border:solid 2px #e791bf;border-radius:4px;color:#e791bf;display:inline-block;font-size:18px;text-transform:uppercase;margin:5px;padding:10px;line-height:1em;text-decoration:none;min-width:120px;outline:none}.reset button:hover{background-color:#e791bf;color:#fff}.hearts{left:0;right:0;z-index:3}.heart{position:absolute;bottom:0;right:10%;z-index:1}.heart:before,.heart:after{position:absolute;content:"";left:50px;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(0.6);opacity:1;animation:slideDown 4s linear 1,sideSway 2s ease-in-out}.a2{left:55%;transform:scale(1);opacity:1;animation:slideDown 5s linear 1,sideSway 4s ease-in-out}.a3{left:10%;transform:scale(0.8);opacity:1;animation:slideDown 7s linear 1,sideSway 2s ease-in-out}@keyframes slideDown{0%{top:-800px}80%{opacity:100}100%{opacity:0;top:10px}}@keyframes sideSway{0%{margin-left:0px}100%{margin-left:50px}}@font-face{font-family:"byteBounce";src:url("../fonts/ByteBounce.ttf") format("truetype")}.kirby-logo{margin-top:60px;width:200px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:50;visibility:hidden;opacity:0;transition:opacity .3s ease}.open-popup+.overlay{visibility:visible;opacity:1}.card-holder{position:relative;z-index:100}.card-container{width:300px;position:absolute;bottom:10%;left:50%;transform:translate(-50%, -50%) scale(0.1);text-align:center;visibility:hidden;transition:transform .4s ease,visibility 0s .4s}.card-container img{box-shadow:0 5px 5px rgba(0,0,0,.2)}.card-container button{margin-top:1em;width:60%;padding:10px 5px;background-color:#fff;border:0;border-radius:25px;font-family:"byteBounce",sans-serif;font-size:24px;color:#d74898;box-shadow:0 5px 5px rgba(0,0,0,.2)}.card-container button:hover{background-color:#e791bf;color:#fff}.open-popup{visibility:visible;top:50%;transform:translate(-50%, -50%) scale(1);transition-delay:1.3s}@media screen and (min-width: 750px){.card-container{width:500px}}/*# sourceMappingURL=main.css.map */