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

body{

    height:100vh;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(-45deg,
    #ffe6ef,
    #fff7da,
    #e9e6ff,
    #dff8ff);

    background-size:400% 400%;

    animation:gradient 12s ease infinite;
}

@keyframes gradient{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

.background{

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

}

.background::before,
.background::after{

content:"❤️";
position:absolute;
font-size:30px;
opacity:.08;

animation:float 18s linear infinite;

}

.background::before{

left:15%;
top:100%;

}

.background::after{

right:20%;
top:100%;
animation-delay:8s;

}

@keyframes float{

from{
transform:translateY(0);
}

to{
transform:translateY(-120vh);
}

}

.container{

width:100%;
padding:25px;

display:flex;
justify-content:center;
align-items:center;

}

.card{

width:100%;
max-width:650px;

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

backdrop-filter:blur(18px);

border-radius:28px;

padding:50px 40px;

box-shadow:
0 20px 60px rgba(0,0,0,.15);

text-align:center;

transition:.4s;

animation:fade .8s;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(25px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.progress{

position:absolute;

top:35px;

left:50%;

transform:translateX(-50%);

width:320px;

height:8px;

background:#f0f0f0;

border-radius:50px;

overflow:hidden;

}

#progressBar{

height:100%;

width:0%;

background:linear-gradient(90deg,#ff4f87,#ff88b0);

transition:.5s;

}

#pageNumber{

font-size:15px;
color:#ff4f87;
font-weight:600;

margin-bottom:20px;

}

h1{

font-size:40px;

line-height:1.25;

color:#2b2b2b;

margin-bottom:30px;

}

p{

font-size:20px;

line-height:1.8;

color:#555;

margin-bottom:40px;

white-space:pre-line;

}

button{

padding:18px 40px;

border:none;

border-radius:999px;

background:#ff5d8f;

color:white;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:translateY(-3px) scale(1.05);

box-shadow:0 15px 35px rgba(255,93,143,.35);

}

@media(max-width:700px){

.card{

padding:35px 25px;

}

h1{

font-size:30px;

}

p{

font-size:17px;

}

.progress{

width:250px;

}

}