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

body{

background:
linear-gradient(
180deg,
#6286db,
#de72a4,
#b864e9);

}

.container{

max-width:700px;

margin:auto;

text-align:center;
}

h1{

font-size:2rem;

color:#d98dd9;

margin-bottom:50px;
}

.scrapbook{

display:flex;

flex-direction:column;

gap:40px;
}

.polaroid{

background:white;

padding:12px;

width:280px;

border-radius:25px;

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

.left{

transform:rotate(-5deg);

margin-right:auto;
}

.right{

transform:rotate(5deg);

margin-left:auto;
}

.center{

transform:rotate(-2deg);

margin:auto;

width:320px;
}

.polaroid img{

width:100%;

height:320px;

object-fit:cover;

border-radius:15px;
}

.polaroid p{

padding:15px;

line-height:1.8;

color:#555;
}

.next-btn{

display:inline-block;

margin-top:60px;

padding:18px 45px;

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

color:white;

text-decoration:none;

border-radius:999px;

font-weight:600;

box-shadow:
0 10px 25px rgba(236,72,153,.25);
}

@keyframes move{

0%{
transform:translateX(-100px);
}

100%{
transform:translateX(100px);
}

}

@media(max-width:768px){

h1{

font-size:2.2rem;
}

.polaroid{

width:250px;
}

.center{

width:280px;
}

.polaroid img{

height:280px;
}

}
.sky-cloud{

position:fixed;

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

border-radius:100px;

filter:blur(20px);

z-index:-1;

}

.cloud1{

width:220px;
height:70px;

top:8%;
left:-250px;

animation:cloudMove 40s linear infinite;
}

.cloud2{

width:300px;
height:90px;

top:25%;
left:-350px;

animation:cloudMove 55s linear infinite;
}

.cloud3{

width:180px;
height:60px;

top:65%;
left:-200px;

animation:cloudMove 35s linear infinite;
}

@keyframes cloudMove{

from{
transform:translateX(0);
}

to{
transform:translateX(150vw);
}

}
.petals span{

position:fixed;

top:-50px;

width:18px;
height:18px;

background:#ffc2d1;

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

opacity:.7;

animation:petalFall 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 petalFall{

0%{
transform:
translateY(-50px)
rotate(0deg);
}

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

}