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

body{

background:
linear-gradient(
180deg,
#38106d,
#85abea,
#ea439f);

overflow-x:hidden;
padding:80px 20px;
position:relative;
}

.container{

max-width:1100px;
margin:auto;
position:relative;
z-index:2;
}

h1{

text-align:center;
font-size:3rem;
color:#ec4899;
margin-bottom:80px;
}

.memory-row{

display:flex;
align-items:center;
justify-content:center;
gap:50px;

margin-bottom:100px;
}

.reverse{

flex-direction:row-reverse;
}

.photo-frame{

background:white;

padding:12px;

border-radius:25px;

width:300px;

box-shadow:
0 15px 35px rgba(0,0,0,.12);

transition:.5s;
}

.photo-frame:hover{

transform:
translateY(-10px)
rotate(2deg);
}

.photo-frame img{

width:100%;

height:380px;

object-fit:cover;

border-radius:15px;
}

.text-box{

max-width:420px;

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

backdrop-filter:blur(12px);

padding:25px;

border-radius:20px;
}

.text-box p{

line-height:2;
color:#555;
font-size:1.05rem;
}

.next-btn{

display:block;

width:max-content;

margin:60px auto;

padding:18px 45px;

border-radius:999px;

background:
linear-gradient(
45deg,
#ec4899,
#f97316);

color:white;

text-decoration:none;

font-weight:600;
}

.cloud{

position:fixed;

background:white;

border-radius:100px;

filter:blur(30px);

opacity:.35;
}

.cloud1{

width:250px;
height:80px;

top:5%;
left:-200px;

animation:cloudMove 35s linear infinite;
}

.cloud2{

width:350px;
height:100px;

top:30%;

left:-350px;

animation:cloudMove 55s linear infinite;
}

@keyframes cloudMove{

from{
transform:translateX(0);
}

to{
transform:translateX(150vw);
}

}

.petals span{

position:fixed;

top:-20px;

width:16px;
height:16px;

background:#f9a8d4;

border-radius:
70% 30% 70% 30%;

animation:fall linear infinite;
}

.petals span:nth-child(1){left:10%;animation-duration:12s;}
.petals span:nth-child(2){left:20%;animation-duration:15s;}
.petals span:nth-child(3){left:35%;animation-duration:10s;}
.petals span:nth-child(4){left:50%;animation-duration:17s;}
.petals span:nth-child(5){left:65%;animation-duration:13s;}
.petals span:nth-child(6){left:80%;animation-duration:18s;}
.petals span:nth-child(7){left:90%;animation-duration:14s;}
.petals span:nth-child(8){left:97%;animation-duration:16s;}

@keyframes fall{

from{
transform:translateY(-20px) rotate(0deg);
}

to{
transform:translateY(120vh) rotate(360deg);
}

}

@media(max-width:900px){

.memory-row,
.reverse{

flex-direction:column;
}

h1{

font-size:2.2rem;
}

}