*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}


body{

height:100vh;
overflow:hidden;
background:linear-gradient(#ffe6ef,#fff);

}



.page{

position:absolute;
height:100%;
width:100%;

display:none;

overflow:hidden;

}



.active{

display:block;

animation:fade .8s;

}



@keyframes fade{

from{
opacity:0;
}

to{
opacity:1;
}

}



h1{

position:absolute;

top:25px;

width:100%;

text-align:center;

padding:0 15px;

font-size:clamp(24px,5vw,38px);

color:#ff4081;

z-index:20;

}




button{


position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

padding:15px 30px;

border:none;

border-radius:50px;

background:#ff4f8b;

color:white;

font-size:clamp(16px,4vw,20px);

cursor:pointer;

z-index:50;

}



button:hover{

transform:translateX(-50%) scale(1.08);

}



.flower{

position:absolute;

animation:fall linear forwards;

}



@keyframes fall{


0%{

transform:translateY(-100px) rotate(0deg);

opacity:1;

}


100%{

transform:translateY(110vh) rotate(720deg);

opacity:.8;

}


}





.sparkle{

position:absolute;

color:white;

font-size:20px;

animation:sparkle 2s linear forwards;

}


@keyframes sparkle{


0%{

opacity:1;

transform:scale(1);

}


100%{

opacity:0;

transform:scale(2) translateY(-100px);

}

}





#proudMessage{


position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);


width:90%;

max-width:850px;

max-height:75vh;


overflow-y:auto;


padding:25px;


background:rgba(255,255,255,.95);

border-radius:20px;


box-shadow:0 10px 30px rgba(0,0,0,.2);


font-size:clamp(15px,3.8vw,22px);

line-height:1.8;

text-align:center;


color:#d81b60;


opacity:0;

transition:2s;


z-index:200;


}



.show{

opacity:1!important;

}



#replay{

display:none;

}



@media(max-width:600px){


button{

width:80%;

bottom:20px;

}


#proudMessage{

max-height:70vh;

padding:18px;

}



.flower{

font-size:25px;

}


}