body { margin: 0; min-height: 100vh; min-height: 100dvh; background: linear-gradient(135deg, #ffcc70, #ff6f61); display: flex; justify-content: center; align-items: center; font-family: 'tharu'; overflow-x: hidden; overflow-y: hidden; } html, body { height: 100%; overflow: hidden; } .awrudu-girl { position: absolute; bottom: 0; right: 0; height: 35vh; max-height: 300px; } .content { position: relative; z-index: 10; text-align: center; color: black; top: 40%; transform: translateY(-50%); } .sweets { position: fixed; bottom: -60px; pointer-events: none; z-index: 0; animation: floatUp linear forwards; } @keyframes floatUp { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-110vh); opacity: 0; } } .card { text-align: center; color: black; position: relative; z-index: 10; } .title { font-size: 42px; font-weight: bold; animation: titlePop 1.5s ease-out; } .subtitle { margin-top: 15px; font-size: 20px; color: black; text-shadow: 0 0 5px #fff, 0 0 10px #812003, 0 0 15px #cc6308, 0 0 20px #e43505, 0 0 30px #be5213; animation: subtitleFade 2.5s ease-out forwards, glitter 2s infinite alternate; opacity: 0; } @keyframes subtitleFade { to { opacity: 1; } } @keyframes glitter { 0% { text-shadow: 0 0 5px #fff, 0 0 10px #ffccff, 0 0 15px #d1490e, 0 0 20px #ba3a0b, 0 0 30px #c98f13; } 100% { text-shadow: 0 0 5px #fff, 0 0 10px #ffccff, 0 0 15px #d1490e, 0 0 20px #ba3a0b, 0 0 30px #c98f13; } } @keyframes titlePop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } @keyframes subtitleFade { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .erabadu { position: absolute; top: 0; left: 0; height: 30vh; width: auto; z-index: 1; } .koha { position: absolute; top: 20%; right: 6%; height: 10vh; animation: bounce 2s infinite; z-index: 2; } .petals { position: fixed; width: 30px; pointer-events: none; z-index: 0; animation: fall 4s linear forwards; } @keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-60%); } } .bottom-left-text { position: absolute; bottom: 20%; left: 15px; color: black; font-size: 18px; font-weight: 500; z-index: 20; font-family: "tharu"; animation: fadeInText 2s ease-out; } @keyframes fadeInText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #bottom-line { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; } .bottom-img { width: 80px; opacity: 0; animation: fadeInOut 2.5s ease-in-out forwards; } @keyframes fadeInOut { 0% { opacity: 0; transform: translateY(10px) scale(0.9); } 25% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scale(1.05); } }