@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f77fad,#ff9bba);overflow-x:hidden;background-attachment:fixed;min-height:100vh;position:relative}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="3" fill="%23ffffff" opacity="0.2"/></svg>');z-index:0;pointer-events:none}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.rsvp-button:hover{background-color:#32500a;color:#f77fad;border:2px solid #32500a;filter:invert(100%)}html{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="%23f77fad" opacity="0.6"/></svg>') 12 12,auto}a,button,.rsvp-button{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="%2332500a" opacity="0.6"/></svg>') 12 12,pointer}::selection{background-color:#f77fad;color:#fff}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff4d;border-radius:10px}::-webkit-scrollbar-thumb{background:#32500a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4a7514}.splash-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#f77fad,#ff9bba);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .5s ease}.splash-content{text-align:center;animation:bounce 1s ease-in-out infinite alternate}.spinner-container{position:relative;width:200px;height:200px;margin:0 auto 20px}.spinner{position:absolute;top:50%;left:50%;border-radius:50%;border-style:solid;border-color:transparent;animation:spin 2s linear infinite}.spinner-0{width:160px;height:160px;margin-top:-80px;margin-left:-80px;border-width:8px;border-top-color:#32500a;animation-duration:2s}.spinner-1{width:130px;height:130px;margin-top:-65px;margin-left:-65px;border-width:6px;border-left-color:#ffacc7;animation-duration:1.8s;animation-direction:reverse}.spinner-2{width:100px;height:100px;margin-top:-50px;margin-left:-50px;border-width:5px;border-bottom-color:#32500a;border-right-color:#32500a;animation-duration:1.5s}.spinner-3{width:70px;height:70px;margin-top:-35px;margin-left:-35px;border-width:4px;border-top-color:#ffacc7;border-left-color:#ffacc7;animation-duration:1.2s;animation-direction:reverse}.spinner-4{width:40px;height:40px;margin-top:-20px;margin-left:-20px;border-width:3px;border-right-color:#32500a;animation-duration:1s;opacity:.7}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner:after{content:"🎈";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0;animation:balloon-appear 3s ease infinite}.spinner-2:after{animation-delay:.5s}.spinner-4:after{animation-delay:1s}@keyframes balloon-appear{0%,to{font-size:0;opacity:0}50%{font-size:30px;opacity:1}}.splash-title{font-family:Bebas Neue,sans-serif;color:#32500a;font-size:clamp(2.5rem,8vw,4rem);margin:20px 0 10px;letter-spacing:2px;text-shadow:2px 2px 0px rgba(255,255,255,.5);animation:glow 2s ease-in-out infinite alternate}.splash-subtitle{color:#fff;font-size:1.2rem;font-family:Roboto,sans-serif;text-shadow:1px 1px 2px rgba(0,0,0,.2);letter-spacing:1px;position:relative}.splash-subtitle:after{content:"...";position:absolute;animation:loadingDots 1.5s infinite;width:1em;text-align:left}@keyframes loadingDots{0%{content:"."}33%{content:".."}66%{content:"..."}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes glow{0%{text-shadow:0 0 5px rgba(255,255,255,.5)}to{text-shadow:0 0 20px rgba(255,255,255,.8),0 0 30px rgba(50,80,10,.3)}}.birthday-container{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f77fad,#ff9bba);font-family:Roboto,sans-serif;overflow:hidden;position:relative;animation:fadeIn 1s ease}@keyframes fadeInMain{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.birthday-card{width:90%;max-width:800px;background:#32500ad9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 60px #00000040;padding:3rem;text-align:center;position:relative;z-index:10;overflow:hidden;transform-style:preserve-3d;transform:perspective(1000px);transition:transform .3s ease;animation:fadeInMain 1s ease;border:3px solid #f77fad;will-change:transform}.birthday-title{font-family:Bebas Neue,sans-serif;font-size:clamp(2.5rem,8vw,4rem);color:#f77fad;margin-bottom:1.5rem;text-shadow:2px 2px 0px rgba(0,0,0,.3);animation:float 3s ease-in-out infinite;letter-spacing:2px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.countdown-container{margin:2rem 0;padding:2rem;background:#f77fad4d;border-radius:15px;box-shadow:0 5px 20px #0003;border:2px solid #f77fad}.countdown-display{display:flex;justify-content:center;flex-wrap:wrap;gap:15px}.countdown-unit{display:flex;flex-direction:column;align-items:center;min-width:80px;padding:10px;background:linear-gradient(135deg,#f77fad,#ff9bba);border-radius:12px;box-shadow:0 8px 15px #f77fad66;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #ffffff}.countdown-unit:hover{transform:translateY(-5px);box-shadow:0 12px 20px #32500a40}.countdown-value{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:700;color:#32500a;display:block;position:relative;animation:pulse 2s ease-in-out infinite;text-shadow:0 0 5px rgba(255,255,255,.5)}.countdown-label{font-size:clamp(.75rem,2vw,1rem);color:#fff;text-transform:uppercase;letter-spacing:1px;position:relative;z-index:2;text-shadow:1px 1px 1px rgba(0,0,0,.2)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.countdown-value:after{content:"";position:absolute;top:50%;left:50%;width:80%;height:80%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff3,#fff0 70%);border-radius:50%;z-index:-1;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{opacity:.5;width:80%;height:80%}to{opacity:.8;width:110%;height:110%}}.party-details{display:flex;align-items:center;justify-content:center;margin:2rem 0;gap:15px}.party-icon{font-size:2.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.party-details p{font-size:clamp(1rem,3vw,1.25rem);color:#fff;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.rsvp-button{background:linear-gradient(135deg,#f77fad,#ff9bba);color:#32500a;padding:15px 30px;font-size:clamp(1rem,3vw,1.5rem);font-weight:700;border:2px solid white;border-radius:50px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;letter-spacing:1px;text-transform:uppercase;box-shadow:0 10px 20px #f77fad4d;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px}.rsvp-text{transition:transform .3s ease;display:inline-block}.rsvp-icon{font-size:0px;transition:all .3s ease;opacity:0;transform:scale(0) rotate(0)}.rsvp-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ff9bba,#f77fad);opacity:0;z-index:-1;transition:opacity .3s ease}.rsvp-button:hover{transform:translateY(-5px);box-shadow:0 15px 25px #f77fad80;color:#32500a;padding:15px 35px;font-weight:900}.rsvp-button:hover .rsvp-text{transform:translate(-5px)}.rsvp-button:hover .rsvp-icon{font-size:clamp(1rem,3vw,1.25rem);opacity:1;transform:scale(1) rotate(15deg)}.rsvp-button:hover:before{opacity:1}.rsvp-button:active{transform:translateY(0);box-shadow:0 5px 15px #32500a33}.rsvp-button:active .rsvp-text{transform:scale(.98)}.rsvp-button:active .rsvp-icon{transform:scale(.9) rotate(0)}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}.confetti{position:absolute;width:12px;height:12px;background:#f77fad;animation:confetti-fall 3s ease-in-out infinite}.confetti:nth-child(5n){border-radius:50%;background:#f7dc7f}.confetti:nth-child(3n){background:#ffacc7;transform-origin:center center}.confetti:nth-child(odd):before{content:"✦";position:absolute;color:#32500a;font-size:15px;top:-5px;left:-5px}.confetti:nth-child(4n):after{content:"❤";position:absolute;color:#f77fad;font-size:12px;top:-4px;left:-2px}.confetti:nth-child(7n){background:#7fb3f7;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:rotate(0) rotateY(0) scale(1)}50%{transform:rotate(360deg) rotateY(180deg) scale(1.2)}to{top:100%;opacity:0;transform:rotate(720deg) rotateY(360deg) scale(.5)}}.confetti:nth-child(odd){width:15px;height:15px;animation-duration:2.5s;animation-name:confetti-fall-zigzag}.confetti:nth-child(3n){width:10px;height:10px;animation-duration:3.5s;animation-name:confetti-fall-swirl}.confetti:nth-child(4n){width:12px;height:12px;animation-duration:4s;animation-name:confetti-fall-curve}.confetti:nth-child(5n){width:8px;height:8px;animation-duration:3s}@keyframes confetti-fall-zigzag{0%{top:-10%;left:calc(var(--xPos, 50) * 1%);opacity:1;transform:rotate(0)}25%{left:calc((var(--xPos, 50) - 15) * 1%)}50%{left:calc((var(--xPos, 50) + 15) * 1%)}75%{left:calc((var(--xPos, 50) - 10) * 1%)}to{top:100%;left:calc(var(--xPos, 50) * 1%);opacity:0;transform:rotate(720deg)}}@keyframes confetti-fall-swirl{0%{top:-10%;left:calc(var(--xPos, 50) * 1%);opacity:1;transform:rotate(0) scale(1)}to{top:100%;left:calc((var(--xPos, 50) + 40 * sin(var(--xPos, 50) * .1rad)) * 1%);opacity:0;transform:rotate(1080deg) scale(.5)}}@keyframes confetti-fall-curve{0%{top:-10%;left:calc(var(--xPos, 50) * 1%);opacity:1;transform:rotate(0)}to{top:100%;left:calc((var(--xPos, 50) + 20) * 1%);opacity:0;transform:rotate(-720deg)}}.confetti:nth-child(2n){animation-delay:.5s}.confetti:nth-child(3n){animation-delay:.2s}.confetti:nth-child(4n){animation-delay:.7s}.confetti:nth-child(5n){animation-delay:.3s}.confetti:nth-child(1){--xPos: 10;left:10%}.confetti:nth-child(2){--xPos: 20;left:20%}.confetti:nth-child(3){--xPos: 30;left:30%}.confetti:nth-child(4){--xPos: 40;left:40%}.confetti:nth-child(5){--xPos: 50;left:50%}.confetti:nth-child(6){--xPos: 60;left:60%}.confetti:nth-child(7){--xPos: 70;left:70%}.confetti:nth-child(8){--xPos: 80;left:80%}.confetti:nth-child(9){--xPos: 90;left:90%}.confetti:nth-child(10){--xPos: 5;left:5%}.confetti:nth-child(11){--xPos: 15;left:15%}.confetti:nth-child(12){--xPos: 25;left:25%}.confetti:nth-child(13){--xPos: 35;left:35%}.confetti:nth-child(14){--xPos: 45;left:45%}.confetti:nth-child(15){--xPos: 55;left:55%}.confetti:nth-child(16){--xPos: 65;left:65%}.confetti:nth-child(17){--xPos: 75;left:75%}.confetti:nth-child(18){--xPos: 85;left:85%}.confetti:nth-child(19){--xPos: 95;left:95%}.confetti:nth-child(20){--xPos: 7;left:7%}.confetti:nth-child(21){--xPos: 14;left:14%}.confetti:nth-child(22){--xPos: 21;left:21%}.confetti:nth-child(23){--xPos: 28;left:28%}.confetti:nth-child(24){--xPos: 35;left:35%}.confetti:nth-child(25){--xPos: 42;left:42%}.confetti:nth-child(26){--xPos: 49;left:49%}.confetti:nth-child(27){--xPos: 56;left:56%}.confetti:nth-child(28){--xPos: 63;left:63%}.confetti:nth-child(29){--xPos: 70;left:70%}.confetti:nth-child(30){--xPos: 77;left:77%}.confetti:nth-child(31){--xPos: 84;left:84%}.confetti:nth-child(32){--xPos: 91;left:91%}.confetti:nth-child(33){--xPos: 98;left:98%}.confetti:nth-child(34){--xPos: 4;left:4%}.confetti:nth-child(35){--xPos: 11;left:11%}.confetti:nth-child(36){--xPos: 18;left:18%}.confetti:nth-child(37){--xPos: 25;left:25%}.confetti:nth-child(38){--xPos: 32;left:32%}.confetti:nth-child(39){--xPos: 39;left:39%}.confetti:nth-child(40){--xPos: 46;left:46%}.confetti:nth-child(41){--xPos: 53;left:53%}.confetti:nth-child(42){--xPos: 60;left:60%}.confetti:nth-child(43){--xPos: 67;left:67%}.confetti:nth-child(44){--xPos: 74;left:74%}.confetti:nth-child(45){--xPos: 81;left:81%}.confetti:nth-child(46){--xPos: 88;left:88%}.confetti:nth-child(47){--xPos: 95;left:95%}.confetti:nth-child(48){--xPos: 9;left:9%}.confetti:nth-child(49){--xPos: 19;left:19%}.confetti:nth-child(50){--xPos: 29;left:29%}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{width:90%;max-width:500px;background:#32500ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:2rem;position:relative;box-shadow:0 20px 60px #0000004d;text-align:center;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);border:3px solid #f77fad;color:#fff}@keyframes popIn{0%{transform:scale(.5) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(3deg)}75%{transform:scale(.95) rotate(-1deg)}to{transform:scale(1) rotate(0);opacity:1}}.modal-close{position:absolute;top:15px;right:15px;width:30px;height:30px;font-size:1.5rem;background:#f77fad;border:none;border-radius:50%;color:#32500a;cursor:pointer;transition:transform .3s ease,background .3s ease,color .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;z-index:10}.modal-close:hover{transform:rotate(90deg);background:#32500a;color:#f77fad}.modal-content h2{font-family:Bebas Neue,sans-serif;color:#f77fad;font-size:2.5rem;margin-bottom:1rem;letter-spacing:2px;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.modal-content p{color:#fff;margin-bottom:1rem;font-size:1.1rem;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.modal-gif{width:100%;max-width:300px;border-radius:10px;margin-top:1rem;box-shadow:0 5px 15px #0003}@media (max-width: 768px){.birthday-card{padding:2rem}.countdown-display{gap:10px}.countdown-unit{min-width:60px}.party-details{flex-direction:column;gap:10px}}@media (max-width: 480px){.birthday-card{padding:1.5rem}.countdown-unit{min-width:50px;padding:8px}}.coloured{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10vw;font-style:bold;font-weight:200;color:#32500a}.birthday-container{animation:gradient-shift 15s ease infinite;background-size:400% 400%}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.balloons-container{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;pointer-events:none;overflow:hidden}.balloon{position:absolute;width:60px;height:70px;border-radius:50%/60% 60% 40% 40%;box-shadow:inset 0 -8px #0000001a,inset 5px 3px #ffffff4d;animation:float-balloon 15s ease-in-out infinite;bottom:-100px;opacity:.8}.balloon-string{position:absolute;width:1px;height:50px;background:#0003;top:70px;left:30px;transform-origin:top center;animation:swing-string 3s ease-in-out infinite}.balloon-0{background:#f77fad;animation-duration:17s;animation-delay:0s;left:5%;width:40px;height:50px}.balloon-1{background:#32500a;animation-duration:22s;animation-delay:1s;left:20%;width:50px;height:60px}.balloon-2{background:#ffacc7;animation-duration:19s;animation-delay:3s;left:40%;width:45px;height:55px}.balloon-3{background:#7fb3f7;animation-duration:24s;animation-delay:2s;left:70%;width:55px;height:65px}.balloon:nth-child(2n){animation-delay:5s}.balloon:nth-child(3n){animation-delay:2s}.balloon:nth-child(4n){animation-delay:7s}.balloon:nth-child(5n){animation-delay:1s}.balloon:nth-child(6n){animation-delay:3.5s}@keyframes float-balloon{0%{transform:translateY(100vh) rotate(5deg);opacity:.8}50%{transform:translateY(40vh) rotate(-5deg);opacity:.9}to{transform:translateY(-20vh) rotate(5deg);opacity:0}}@keyframes swing-string{0%,to{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}.rsvp-button:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,#fff0,#ffffff1a,#fff0);transform:rotate(30deg);transition:transform .7s ease;z-index:-1}.rsvp-button:hover:after{transform:rotate(30deg) translate(100%,-100%)}
