html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Montserrat;
background:#f5e6c8;
color:#333;
text-align:center;
}

/* floral corners */

.floral{
position:fixed;
width:120px;
height:120px;
background-size:contain;
background-repeat:no-repeat;
opacity:0.9;
pointer-events:none;
z-index:0;
}

.floral-top-left{
top:0;
left:0;
background-image:url("https://pngimg.com/uploads/flowers/flowers_PNG102.png");
}

.floral-top-right{
top:0;
right:0;
transform:scaleX(-1);
background-image:url("https://pngimg.com/uploads/flowers/flowers_PNG102.png");
}

.floral-bottom-left{
bottom:0;
left:0;
transform:scaleY(-1);
background-image:url("https://pngimg.com/uploads/flowers/flowers_PNG102.png");
}

.floral-bottom-right{
bottom:0;
right:0;
transform:scale(-1);
background-image:url("https://pngimg.com/uploads/flowers/flowers_PNG102.png");
}

/* page border */

.page-border{
border:6px double #6b0f1a;
margin:15px;
padding:10px;
background:#fffaf2;
}

/* sections */

section{
padding:40px 20px;
}

.bordered{
border-top:2px solid #d4af37;
border-bottom:2px solid #d4af37;
margin:20px auto;
max-width:900px;
border-radius:8px;
background:#fffaf2;
}

/* hero */

.hero{
height:60vh;
background:
linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),
url("https://images.unsplash.com/photo-1523438885200-e635ba2c371e");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}

.hero h1{
font-family:'Playfair Display';
font-size:55px;
margin:10px 0;
}

.hero span{
color:#6b0f1a;
}

.date{
font-size:18px;
margin-bottom:20px;
}

/* button */

.btn{
background:#6b0f1a;
padding:12px 26px;
color:white;
text-decoration:none;
border-radius:25px;
}

/* divider */

.divider{
font-size:30px;
color:#d4af37;
margin:10px 0;
}

/* countdown */

#timer{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.time-box{
font-size:24px;
padding:10px;
}

/* cards */

.cards{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.card{
background:white;
padding:20px;
width:220px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* form */

input,select{
display:block;
margin:10px auto;
padding:10px;
width:230px;
border-radius:5px;
border:1px solid #ccc;
}

button{
background:#d4af37;
border:none;
padding:12px 28px;
color:white;
font-weight:bold;
border-radius:25px;
cursor:pointer;
}

footer{
padding:15px;
font-size:14px;
}

/* responsive */

@media (max-width:768px){

.hero h1{
font-size:38px;
}

.card{
width:90%;
}

input,select{
width:85%;
}

}

@media (max-width:480px){

.floral{
width:70px;
height:70px;
}

.hero{
height:50vh;
}

.hero h1{
font-size:30px;
}

}
/* falling petals */

.petals{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:1;
}

.petal{
position:absolute;
top:-50px;
font-size:20px;
color:#d4af37;
animation:fall linear infinite;
opacity:0.8;
}

@keyframes fall{

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

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

}