@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400&display=swap";@import "https://fonts.googleapis.com/css2?family=Fasthand&display=swap";*{box-sizing:border-box;color:azure;margin:0;padding:0;font-family:gilroy}html,body{width:100%;height:100%;overflow-x:clip}body{background-color:#fbf8f5}main{background-color:#fbf8f5;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:360vh;padding:20px;display:flex}.home-container{background-color:#fbf8f5;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Plus Jakarta Sans,sans-serif;transition:opacity .8s;display:flex}.home-container.fade-out{opacity:0}.hero-section{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:400px;display:flex}.subtitle{color:#b86871;margin-bottom:8px;font-family:Cormorant Garamond,serif;font-size:18px;font-style:italic}.title{color:#352b2b;margin-bottom:16px;font-family:Cormorant Garamond,serif;font-size:36px;font-weight:400;line-height:1.2}.italic-title{color:#6b5b5b;font-style:italic}.description{color:#6b5b5b;margin-bottom:40px;padding:0 10px;font-size:13px;font-weight:300;line-height:1.5}.envelope-wrapper{perspective:1200px;cursor:pointer;width:100%;max-width:320px;height:208px;margin:0 auto 40px;position:relative}.envelope-pocket{background-color:#efe6dd;border:1px solid #dfd3c6;border-radius:4px;justify-content:center;display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:0 20px 45px -10px #5c4a4a26}.peek-letter{background-color:#fffdfb;border:1px solid #e5e7eb;border-radius:6px 6px 0 0;flex-direction:column;align-items:center;width:85%;height:110px;padding:16px;transition:transform .85s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:10px}.peek-letter.opened{transform:translateY(-70px)}.letter-line{border-radius:99px;margin-bottom:8px}.pink-line{background-color:#e8c5c899;width:64px;height:4px;margin-bottom:12px}.grey-line-1{background-color:#e5e7ebb3;width:100%;height:6px}.grey-line-2{background-color:#e5e7eb99;width:75%;height:6px}.grey-line-3{background-color:#e5e7eb66;width:50%;height:6px}.lower-flaps{pointer-events:none;z-index:10;position:absolute;inset:0}.flap-svg{width:100%;height:100%}.envelope-flap{z-index:20;transform-origin:top;height:128px;transition:transform .85s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;right:0}.envelope-flap.opened{z-index:5;transform:rotateX(180deg)}.drop-shadow{filter:drop-shadow(0 4px 6px #0000000d)}.wax-seal-container{z-index:30;transition:opacity .4s,transform .3s;position:absolute;top:110px;left:50%;transform:translate(-50%,-50%)}.wax-seal-container.hidden{opacity:0;pointer-events:none}.wax-seal-img{object-fit:contain;width:70px;height:74px}.envelope-wrapper:hover .wax-seal-container{transform:translate(-50%,-50%)scale(1.05)}.open-btn{color:#352b2b;cursor:pointer;background-color:#fffdfb;border:1px solid #d98a9266;border-radius:99px;align-items:center;gap:12px;margin-bottom:12px;padding:10px 24px;font-family:Cormorant Garamond,serif;font-size:16px;transition:all .3s;display:inline-flex}.open-btn:hover .arrow-icon{transition:transform .3s;transform:translate(4px)}.hint-text{color:#9a8888;font-size:11px}.open-text{color:#352b2b;font-family:Cormorant Garamond,serif;font-size:16px}.alert-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background-color:#352b2b66;justify-content:center;align-items:center;padding:20px;animation:.4s ease-out fadeIn;display:flex;position:fixed;inset:0}.alert-box{text-align:center;background-color:#fffdfb;border:1px solid #d98a924d;border-radius:16px;flex-direction:column;align-items:center;width:100%;max-width:320px;padding:32px 24px;animation:.4s ease-out slideUp;display:flex;box-shadow:0 12px 32px -4px #5c4a4a1f}.alert-icon-wrapper{background-color:#f6e9eb;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:16px;display:flex}.alert-title{color:#352b2b;margin:0 0 8px;font-family:Cormorant Garamond,serif;font-size:22px;font-weight:500}.alert-text{color:#6b5b5b;margin:0 0 24px;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;line-height:1.5}.alert-btn{color:#352b2b;cursor:pointer;background:linear-gradient(135deg,#e8c5c899 0%,#d98a9266 100%);border:1px solid #d98a9299;border-radius:99px;width:100%;padding:10px 24px;font-family:Cormorant Garamond,serif;font-size:16px;transition:all .2s}.alert-btn:active{transform:scale(.96)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1{color:#000}.letterbox{box-sizing:border-box;background:#fffdfb;border:1px solid #e7e5f4b3;border-radius:16px;width:361px;padding-bottom:23.31px;position:relative;box-shadow:0 4px 20px -2px #5c4a4a12,0 2px 6px -1px #5c4a4a0a}.dearMoulshree{letter-spacing:0;color:#352b2b;font-family:Fasthand,cursive;font-size:30px;font-weight:400;line-height:36px}.titleLine{background-color:#e7e5e499;width:311px;margin-top:24px;padding-top:1px}.letterContent{padding-top:40px;padding-left:24px;padding-right:24px}.header{margin-bottom:16px}.paragraphContainer{padding-top:32px}.paraOne{color:#9a8888cc;letter-spacing:0;text-align:left;vertical-align:middle;font-family:Fasthand,cursive;font-size:17px;font-weight:100;line-height:22.8px}.paraTwo,.paraThree,.paraFour{color:#9a8888cc;letter-spacing:0;text-align:left;vertical-align:middle;margin-top:24px;font-family:Fasthand,cursive;font-size:17px;font-weight:100;line-height:22.8px}.footerContainer{padding-top:39.69px}.footerLine{background-color:#e7e5e499;width:311px;margin-top:24px;padding-top:1px}.footerT1{padding-bottom:10p;letter-spacing:.6px;text-align:left;color:#9a8888;opacity:1;margin-top:24px;font-family:Fasthand,cursive;font-size:12px;font-weight:400;line-height:16px}.footerT2{letter-spacing:0;text-align:left;color:#352b2b;opacity:1;padding-top:6px;font-family:Fasthand,cursive;font-size:24px;font-style:italic;font-weight:400;line-height:32px}.footerT3{letter-spacing:0;text-align:left;color:#d98a92;opacity:1;padding-right:6px;font-family:Cormorant Garamond,serif;font-size:12px;font-style:italic;font-weight:400;line-height:16px}.footerT4{letter-spacing:0;text-align:left;color:#d98a92;opacity:1;padding-left:6px;font-family:Cormorant Garamond,serif;font-size:12px;font-style:italic;font-weight:400;line-height:16px}.footerDot{letter-spacing:0;text-align:left;color:#d98a92;opacity:1;font-family:Cormorant Garamond,serif;font-size:12px;font-style:italic;font-weight:400;line-height:16px}.footerLowerText{padding-top:16px}.rocket-icon{filter:brightness(0)saturate()invert(87%)sepia(15%)saturate(2146%)hue-rotate(293deg)brightness(82%)contrast(88%);width:80px;height:80px;padding-bottom:35px;padding-left:-50px;padding-right:20px}.footerUltimate{height:36px;display:flex}.section2{margin-top:96px;padding-top:48px}.redHeading{letter-spacing:0;text-align:center;color:#b86871;font-family:Cormorant Garamond,serif;font-size:14px;font-style:italic;line-height:20px}.blackHeading{letter-spacing:0;text-align:center;color:#352b2b;padding-top:4px;font-family:Cormorant Garamond,serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.Cards{padding-top:24px}.cardOne{box-sizing:border-box;background-color:#fffdfbcc;border:1px solid #e7e5f4b3;border-radius:16px;gap:16px;padding:20px;display:flex;box-shadow:0 4px 20px -2px #5c4a4a12,0 2px 6px -1px #5c4a4a0a}.cardTwo{box-sizing:border-box;background-color:#fffdfbcc;border:1px solid #e7e5f4b3;border-radius:16px;gap:16px;margin-top:16px;padding:20px;display:flex;box-shadow:0 4px 20px -2px #5c4a4a12,0 2px 6px -1px #5c4a4a0a}.mindfulnessContainer{background-color:#f6e9eb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.mindfulness-icon{border-radius:50%;width:30px;height:30px}.cardTitle{letter-spacing:0;color:#352b2b;font-family:Cormorant Garamond,serif;font-size:18px;font-weight:500;line-height:28px}.card-inner-text{letter-spacing:0;color:#6b5b5b;padding-top:12px;font-family:Plus Jakarta Sans,sans-serif;font-size:11px;font-weight:400;line-height:19.5px}.accountabilityContainer{background-color:#e2e8dfb3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.accountibilit-icon{border-radius:50%;width:30px;height:30px}.respectContainer{background-color:#f6e9eb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.respect-icon{border-radius:50%;width:40px;height:40px}.lastCardContainer{padding-top:48px}.lastCard{box-sizing:border-box;background-color:#fffdfbcc;border:1px solid #e7e5f4b3;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex;box-shadow:0 4px 20px -2px #5c4a4a12,0 2px 6px -1px #5c4a4a0a}.timeContainer{background-color:#dad3f4;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.time-icon{border-radius:50%;width:50px;height:50px}.lastCardTitle{letter-spacing:0;text-align:center;color:#352b2b;padding-top:12px;font-family:Cormorant Garamond,serif;font-size:24px;font-weight:400;line-height:32px}.lastCardText{letter-spacing:0;text-align:center;color:#6b5b5b;padding-top:8px;font-family:Plus Jakarta Sans,sans-serif;font-size:12px;font-weight:300;line-height:19.5px}.theButtonContainer{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding-top:24px;padding-left:24px;padding-right:24px;display:flex}.petal-btn,.punch-btn{box-sizing:border-box;background:linear-gradient(#e8c5c880 0%,#eed3d6a1 13%,#f1dddfbf 25%,#f6e9eb 50%,#f1dddfbf 75%,#eed3d6a1 88%,#e8c5c880 100%);border:1px solid #d98a9266;border-radius:9999px;flex-direction:row;align-content:space-evenly;align-items:center;gap:10px;height:46px;padding:12px 24px;display:flex}.btn-text{letter-spacing:0;text-align:center;color:#352b2b;font-family:Cormorant Garamond,serif;font-size:14px;font-weight:400;line-height:32px}.petal-btn-icon-container{background-color:#dad3f4;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.petal-btn-icon{border-radius:50%;width:16px;height:16px}.punch-btn-icon-container{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.punch-btn-icon{filter:brightness(0)saturate()invert(36%)sepia(31%)saturate(5425%)hue-rotate(332deg)brightness(87%)contrast(91%);border-radius:50%;width:30px;height:30px}.tape{box-sizing:border-box;z-index:10;background:linear-gradient(#e8c5c880 0%,#eed3d6a1 13%,#f1dddfbf 25%,#f6e9eb 50%,#f1dddfbf 75%,#eed3d6a1 88%,#e8c5c880 100%);border-left:2px dashed #d98a9266;border-right:2px dashed #d98a9266;width:90px;height:35px;position:absolute;top:-15px}.tape-left{left:30px;transform:rotate(-2deg)}.tape-right{right:30px;transform:rotate(2deg)}.privateLetter{letter-spacing:.6px;text-align:left;color:#9a8888cc;margin-bottom:28px;padding-left:17px;font-family:Cormorant Garamond,serif;font-size:12px;font-style:italic;line-height:16px}.scroll{letter-spacing:0;color:#6b5b5b;margin-top:500px;font-family:Fasthand,cursive;font-size:35px;font-weight:400;line-height:22.8px}.scrollContainer{flex-direction:column;justify-content:center;align-items:center;gap:115px;height:760px;display:flex}.scroll-icon-container{margin-top:200px;padding-bottom:400px}.scroll-icon{height:200px}.dear{letter-spacing:0;color:#352b2b;font-family:Fasthand,cursive;font-size:30px;font-weight:400;line-height:36px}.musicplayer{justify-content:center;align-items:center;display:flex}.paraOne .word,.paraTwo .word,.paraThree .word,.paraFour .word{color:#9a8888cc;font-family:Fasthand,cursive}button:active{background-color:#fa001d}.falling-petals{pointer-events:none;z-index:10;width:100%;height:100%;position:fixed;inset:0}.punch-game-body{z-index:9999;background:radial-gradient(#374146 0%,#000 100%);width:100vw;height:100vh;font-family:Luckiest Guy,sans-serif;position:fixed;inset:0;overflow:hidden}.punch-game-body *{box-sizing:border-box}.punch-game-body main{background-color:#0000;width:100%;height:100%;padding:0;display:block;position:absolute;top:0;left:0}.back-btn{z-index:99999999;color:#fff;cursor:pointer;background:0 0;border:1px solid #fff;border-radius:4px;padding:5px 15px;position:absolute;top:1em;right:1em}div#bottombar{width:100%;margin:0 0 2em;position:fixed;bottom:0;left:0}.optionsbar{flex-flow:wrap;justify-content:space-between;align-items:center;margin:2.5em;display:flex}#scene{width:100vw;max-width:80vh;height:100vh;margin:0 auto;position:relative;overflow:hidden}#overlay{text-align:center;color:#fff;z-index:1000;background:#000000b3;flex-flow:column wrap;justify-content:center;align-items:center;width:100%;height:100%;font-size:8vw;display:flex;position:absolute;top:0}#overlay button{color:#fff;cursor:pointer;background:#000;border:0;margin-top:.5em;padding:10px 25px;font-size:60%;font-weight:900}#overlay .instructions{text-transform:uppercase;background:#00000080;margin-top:1em;padding:.5em;font-family:arial;font-size:30%;font-weight:100}#overlay .score{color:#c83737;font-size:80%}#overlay p{background:#fff3;padding:1em;font-size:30%}button#mute{z-index:99999999;cursor:pointer;background:0 0;border:0;font-size:5vw;position:absolute;top:.5em;left:.5em}button#mute:after{content:"🔊"}button#mute.on:after{content:"🔈"}button#start{animation:1s infinite blink}#score{float:left;color:#f33;font-size:10vw}#time{float:right;color:#fff;font-size:10vw}#talk{background:linear-gradient(#ffeb3bb8,#ff3b3bb8);width:1.5em;transition:all .25s;position:absolute;bottom:0;left:0}#badman{animation:1s infinite bm_idle;position:relative;top:calc(38% - 170px);left:calc(50% - 160px)}#badman .head{background-position:top;background-repeat:no-repeat;background-size:contain;width:320px;height:372px;animation:2s infinite bm_head_idle}#badman .head:before{display:none}#badman .vest{background-position:0 0;background-repeat:no-repeat;background-size:100%;width:700px;height:700px;position:absolute;top:210px;left:-190px}#player{width:100%;transition:all .75s;position:absolute;top:0}#player.hidden{top:100vh}#player .leftarm,#player .rightarm{transform-origin:bottom;width:6em;height:14em;position:absolute;top:65vh}#player .leftarm{background:linear-gradient(90deg,#333,#000);border-radius:100% 120% 8em 100%;animation:1.5s infinite pl_idle_lefttarm;left:calc(10% - 6em);transform:rotate(45deg)}#player .rightarm{background:linear-gradient(270deg,#333,#000);border-radius:120% 100% 100% 8em;animation:1.5s .75s infinite pl_idle_rightarm;right:calc(10% - 6em);transform:rotate(-45deg)}#player .hand{background-image:var(--fist-img);background-size:cover;border-radius:50%;width:9em;height:9em;position:absolute;top:-9em;left:-1.5em}#player .rightarm .hand{transform:scaleX(-1)}#player .rightarm.punch{animation:.2s pl_punchright}#player .leftarm.punch{animation:.2s pl_punchleft}#badman.talk .head:before{animation:.3s .2s infinite bm_talk}#badman.punched .head{animation:.15s bm_punched}#badman.punched.right .head:before{animation:.2s bm_outchright}#badman.punched.left .head:before{animation:.2s bm_outchleft}#punch-left,#punch-right{cursor:pointer;background:#fff3;border:2px solid #fff;border-radius:50%;width:60px;height:60px}@keyframes bm_idle{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes bm_head_idle{0%,50%,to{transform:translate(0)translateY(0)}25%{transform:translate(-15px)translateY(10px)}75%{transform:translate(15px)translateY(10px)}}@keyframes pl_idle_rightarm{0%{transform:rotate(-45deg)}50%{transform:rotate(-40deg)}}@keyframes pl_idle_lefttarm{0%{transform:rotate(45deg)}50%{transform:rotate(40deg)}}@keyframes pl_punchright{50%{transform:translate(-20vh)translateY(-45vh)rotate(-90deg)rotateX(50deg)}}@keyframes pl_punchleft{50%{transform:translate(20vh)translateY(-45vh)rotate(90deg)rotateX(50deg)}}@keyframes bm_outchleft{20%{transform:translate(0)translateY(0)scale(.4)rotate(0)}80%{transform:translate(25px)translateY(15px)scale(.5)rotate(120deg)}}@keyframes bm_outchright{20%{transform:translate(0)translateY(0)scale(.4)rotate(0)}80%{transform:translate(-25px)translateY(15px)scale(.5)rotate(-120deg)}}@keyframes blink{50%{color:#f33;background:#ffeb3b}80%{opacity:.7}}@keyframes bm_punched{50%{transform:scale(.8)}}@keyframes bm_talk{0%,40%{top:105%}20%{top:100%;transform:rotate(5deg)}70%{top:100%;transform:rotate(-5deg)}to{top:110%}}
