@import"https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap";.candlelight{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,var(--bg-color),rgba(252,134,134,.37));animation:flicker 4s infinite;pointer-events:none;z-index:-1}@keyframes flicker{0%,to{opacity:.8}25%{opacity:.6}50%{opacity:.7}75%{opacity:.5}}:root{--primary: white;--bg-color: rgb(253, 246, 236);--shadow-color: rgba(0, 0, 0, .1);--bg-envelope-color: #f5edd1;--envelope-tab: #ecdeb8;--envelope-cover: #e6cfa7;--heart-color: #c2465d;--envelope-width: 350px;--envelope-height: 250px;--font-size-base: 16px}*,*:before,*:after{box-sizing:border-box}html{font-size:var(--font-size-base)}body{margin:0;padding:0;background:var(--bg-color);font-family:Amatic SC,cursive;display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1rem}.transition{transition:all .3s ease}@media (max-width: 768px){:root{--font-size-base: 14px}}@media (max-width: 480px){:root{--font-size-base: 12px}}.container{display:grid;place-items:center;padding:1rem}.envelope-wrapper{background:var(--bg-envelope-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;position:relative;width:var(--envelope-width);height:var(--envelope-height);transition:transform .3s ease,opacity .5s ease}.envelope-wrapper:hover{transform:scale(1.02)}@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.1)}50%{transform:scale(.95)}70%{transform:scale(1.05)}to{transform:scale(1)}}.bounce{animation:bounce .6s ease}.envelope{position:relative;width:100%;height:100%}.envelope:before{content:"";position:absolute;top:0;z-index:2;border-top:calc(var(--envelope-height) * .52) solid var(--envelope-tab);border-right:calc(var(--envelope-width) / 2) solid transparent;border-left:calc(var(--envelope-width) / 2) solid transparent;transform-origin:top;transition:all .5s ease-in-out .7s}.envelope:after{content:"";position:absolute;z-index:2;width:0;height:0;border-top:calc(var(--envelope-height) * .52) solid transparent;border-right:calc(var(--envelope-width) / 2) solid var(--envelope-cover);border-bottom:calc(var(--envelope-height) * .48) solid var(--envelope-cover);border-left:calc(var(--envelope-width) / 2) solid var(--envelope-cover)}.letter{position:absolute;right:20%;bottom:0;width:54%;height:80%;background:var(--primary);text-align:center;transition:all 1s ease-in-out;box-shadow:0 0 5px var(--shadow-color);padding:20px 10px;overflow:hidden;cursor:pointer}.letter .text{font-size:1rem;line-height:1.4;text-align:justify;margin:0}.letter .text strong{font-size:1.1rem}.sincerely{text-align:right;margin-top:1rem;font-size:.9rem}.heart{position:absolute;top:50%;left:50%;width:15px;height:15px;background:var(--heart-color);z-index:4;transform:translate(-50%,-20%) rotate(45deg);transition:transform .5s ease-in-out 1s;box-shadow:0 1px 6px var(--shadow-color);cursor:pointer}.heart:before,.heart:after{content:"";position:absolute;width:15px;height:15px;background-color:var(--heart-color);border-radius:50%}.heart:before{top:-7.5px}.heart:after{right:7.5px}.heart:hover{filter:brightness(1.1)}.flap .envelope:before{transform:rotateX(180deg);z-index:0}.flap .letter{bottom:100px;transform:scale(1.5);transition-delay:1s}.flap .heart{transform:rotate(90deg);transition-delay:.4s}.final .envelope:before,.final .envelope:after,.final .heart,.final .stamp{opacity:0;transition:opacity .5s ease}.final .letter{transform:scale(2);bottom:20px;transition:transform .5s ease,bottom .5s ease}.stamp{position:absolute;bottom:10px;right:10px;width:85px;height:auto;z-index:5;transition:opacity .5s ease}.buttons-container{position:absolute;left:50%;transform:translate(-50%);z-index:10;display:none;gap:40px;transition:all .3s ease}.btn{padding:10px 30px;border:none;border-radius:20px;font-size:1.5rem;font-family:Amatic SC,cursive;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 5px #0003}.yes-btn{background-color:#c2465d;color:#fff}.no-btn{background-color:#666;color:#fff;position:relative}.final .buttons-container{display:flex;animation:fadeInUp .5s ease forwards}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@media (max-width: 768px){:root{--envelope-width: 320px;--envelope-height: 230px}.letter{padding:18px 10px}.letter .text{font-size:.95rem}.heart{width:13px;height:13px}.heart:before,.heart:after{width:13px;height:13px}.stamp{width:75px}.btn{padding:8px 25px;font-size:1.3rem}}@media (max-width: 480px){:root{--envelope-width: 280px;--envelope-height: 200px}.letter{padding:15px 8px}.letter .text{font-size:.85rem}.heart{width:11px;height:11px}.heart:before,.heart:after{width:11px;height:11px}.stamp{width:65px}.btn{padding:6px 20px;font-size:1.2rem}}@media (min-width: 1200px){:root{--envelope-width: 400px;--envelope-height: 280px}.letter{padding:25px 15px}.letter .text{font-size:1.1rem}.heart{width:18px;height:18px}.heart:before,.heart:after{width:18px;height:18px}.stamp{width:100px}.btn{padding:12px 35px;font-size:1.7rem}}.heart-container{width:100vw;height:15vh;position:relative}svg{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:150%}svg path#line{fill:none;stroke:#e00000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:1;stroke-dashoffset:1;animation:dash 4s linear infinite}svg path#heart{transform-origin:center;animation:blink 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes dash{0%{stroke-dashoffset:1;opacity:1}95%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}@keyframes blink{0%,to{opacity:0;transform:translate(-50%,-50%) scale(0)}60%{opacity:0;transform:translate(-50%,-50%) scale(0)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}75%{transform:scale(1)}85%{transform:scale(1);opacity:1}95%{transform:scale(.9);opacity:.5}to{opacity:0;transform:scale(0)}}.countdown-container{color:var(--heart-color);margin:0 auto;text-align:center;font-family:Amatic SC,cursive;width:100%;max-width:600px}.countdown-container h1{font-weight:400;letter-spacing:.125rem;text-transform:uppercase;font-size:5rem;margin-bottom:2rem}.countdown-container ul{display:flex;justify-content:center;list-style-type:none;padding:0;flex-wrap:wrap}.countdown-container li{display:inline-block;font-size:1.5em;list-style-type:none;padding:1em;text-transform:uppercase}.countdown-container li span{display:block;font-size:4.5rem}.emoji{display:none;padding:1rem}.emoji span{font-size:4rem;padding:0 .5rem}@media all and (max-width: 768px){.countdown-container{max-width:90%}.countdown-container h1{font-size:2.5rem}.countdown-container li{font-size:1.25rem;padding:.75em}.countdown-container li span,.emoji span{font-size:3.5rem}}@media all and (max-width: 480px){.countdown-container{max-width:95%}.countdown-container h1{font-size:4.75rem;margin-bottom:1.5rem}.countdown-container li{font-size:2rem;padding:.5em}.countdown-container li span{font-size:4.75rem}.emoji span{font-size:3rem}}.i-love-you-page{display:flex;flex-direction:column;align-items:center;padding:20px;overflow:hidden;box-sizing:border-box;position:relative;background:var(--bg-color);color:var(--primary)}.back-arrow{position:fixed;top:20px;left:20px;font-size:1.5rem;text-decoration:none;color:var(--heart-color);z-index:10;background:#0000001a;padding:10px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-family:Amatic SC,cursive;font-weight:700}.back-arrow:hover{background:#fff3;transform:scale(1.1)}.heart-container{margin:80px 0 20px;position:relative;z-index:1}.countdown-wrapper{width:80%;max-width:500px;margin:20px 0;z-index:2;position:relative}.video-wrapper{width:300px;max-width:90%;position:relative;z-index:2}@media (max-width: 768px){.back-arrow{font-size:1.3rem;width:35px;height:35px}.heart-container{margin:60px 0 15px}.countdown-wrapper{width:90%}}@media (max-width: 480px){.back-arrow{font-size:1.1rem;width:30px;height:30px;padding:8px}.heart-container{margin:50px 0 10px}.countdown-wrapper{width:95%}}