@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{
height:100vh;overflow:hidden;
display:flex;justify-content:center;align-items:center;
background:linear-gradient(135deg,#ffd6e8,#d9c7ff);
font-family:Poppins,sans-serif;
}

#giftPage{text-align:center;color:#8e44ad}
#giftPage h2{font-size:32px;margin-bottom:50px}

.giftBox{
width:180px;height:150px;position:relative;margin:auto;
cursor:pointer;transition:.5s;
}
.giftBox:hover{transform:scale(1.1)}
.box{
width:180px;height:110px;background:#ff4d88;
position:absolute;bottom:0;border-radius:10px;
}
.lid{
width:200px;height:35px;background:#ff1f68;
position:absolute;top:20px;left:-10px;border-radius:10px;
animation:shake 1.5s infinite;
}
@keyframes shake{50%{transform:rotate(5deg)}}

#birthdayPage{display:none}
.card{
width:420px;background:white;padding:40px;border-radius:30px;
text-align:center;box-shadow:0 20px 60px #0003;
animation:show 1.5s;
}
@keyframes show{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.cake{font-size:80px;animation:bounce 1s infinite alternate}
@keyframes bounce{to{transform:translateY(-15px)}}

h1{font-family:'Great Vibes';font-size:65px;color:#ff4d88}
h2{color:#8e44ad}
.age{font-size:60px;font-weight:bold;color:#ff4d88}
p{color:#555;line-height:1.8;margin-top:20px}

.heart{
position:absolute;font-size:25px;
animation:fall 7s linear infinite;
}
@keyframes fall{
from{transform:translateY(100vh)}
to{transform:translateY(-10vh)}
}