🔊 Music
Together with their families

you are invited to

the wedding of
/* 🎛️ MUSIC BUTTON */ .music-btn { position: fixed; top: 15px; right: 15px; background: #f88ea0; color: white; padding: 10px 14px; border-radius: 20px; font-size: 14px; cursor: pointer; z-index: 999; } /* ENVELOPE */ .envelope-screen { position: fixed; width: 100%; height: 100%; background: #d4cfe5; display: flex; align-items: center; justify-content: center; z-index: 9999; } .envelope { width: 260px; height: 180px; background: linear-gradient(135deg, #ffccd5, #ff8fab); border-radius: 12px; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.2); } .flap { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #fdd9e7, #ff4d6d); clip-path: polygon(0 0, 100% 0, 50% 65%); transform-origin: top; transition: 2s; } .seal { position: absolute; width: 150px; height: 120px; top: 55%; left: 58%; transform: translate(-50%, -50%); cursor: pointer; background-image: url("sealing.png"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; } /* ✅ CURTAINS FIXED */ .curtain { position: fixed; top: 0; width: 50vw; height: 100vh; /* FULL HEIGHT FIX */ z-index: 1; transition: 3s ease-in-out; background-size: 80% 80%; background-repeat: no-repeat; } /* LEFT */ .left-curtain { left: 0; background-image: url("left curtain.png"); background-position: right center; } /* RIGHT */ .right-curtain { right: 0; background-image: url("right curtain.png"); background-position: left center; } .open-left { transform: translateX(-100%); } .open-right { transform: translateX(100%); } /* CINEMA */ .cinema-text { position: fixed; top: 40%; width: 100%; font-size: 30px; font-family: 'Great Vibes', cursive; opacity: 0; animation: fadeCinema 20s forwards; } @keyframes fadeCinema { 0%{opacity:0;}50%{opacity:1;}100%{opacity:0;} } /* HERO */ .hero h1 { font-family: 'Lucida Handwriting', cursive; font-size: 55px; } /* CD SCRATCH */ .circle-container { display: flex; justify-content: center; gap: 20px; } .circle { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #d88089, #ccc, #aaa); position: relative; display: flex; align-items: center; justify-content: center; } .circle span { opacity: 0; font-weight: bold; } .circle canvas { position: absolute; top: 0; left: 0; } /* SAVE */ .save { font-size: 26px; font-family: 'Great Vibes'; margin-top: 20px; color: #000000; opacity: 0; } /* VENUE */ .venue { display: none; margin-top: 40px; padding: 20px; border-radius: 15px; } .venue h2 { font-family: 'Great Vibes'; font-size: 40px; } /* PETALS */ .petal { position: fixed; top: -10px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(100vh); } }
🔊 Music
Together with their families

you are invited to

the wedding of