body{
margin:0;
font-family:Arial, sans-serif;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
text-align:center;
color:white;
position:relative;
overflow-x:hidden;
scroll-behavior:smooth;
}

/* HEADINGS */
h1{
margin-top:40px;
font-size:40px;
}

p{
font-size:19px;
line-height:1.6;
padding:0 20px;
}

/* BUTTON */
button{
margin-top:25px;
padding:15px 35px;
border:none;
border-radius:30px;
background:#ff4e8a;
color:white;
font-size:18px;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

button:hover{
transform:scale(1.08);
background:#ff2e6e;
box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

/* GALLERY */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:30px;
max-width:900px;
margin:auto;
}

.gallery img{
width:100%;
height:200px;
object-fit:cover;
border-radius:15px;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.gallery img:hover{
transform:scale(1.06);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* VIEWER */
.viewer{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
flex-direction:column;
align-items:center;
justify-content:center;
z-index:999;
animation:fadeIn 0.3s ease;
}

.viewer img{
max-width:90%;
max-height:70%;
border-radius:20px;
}

/* CLOSE */
.close{
position:absolute;
top:20px;
right:30px;
font-size:30px;
cursor:pointer;
}

/* ARROWS */
.arrow{
position:absolute;
top:50%;
font-size:40px;
color:white;
cursor:pointer;
padding:10px;
}

.left{ left:20px; }
.right{ right:20px; }

.arrow:hover{
transform:scale(1.2);
}

/* REASONS */
.reasons{
max-width:600px;
margin:auto;
background:rgba(255,255,255,0.2);
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* FINAL PAGE */
.final-message{
max-width:800px;
margin:auto;
padding:30px;
font-size:20px;
line-height:1.7;
background:rgba(255,255,255,0.15);
border-radius:20px;
backdrop-filter:blur(10px);
box-shadow:0 10px 30px rgba(0,0,0,0.2);
animation:fadeUp 1s ease;
}

#loveCounter{
font-size:20px;
margin-bottom:15px;
text-shadow:0 0 8px rgba(255,255,255,0.7);
}

.ending{
margin-top:30px;
font-weight:bold;
font-size:22px;
}

/* CAKE */
#cake{
font-size:120px;
margin-top:30px;
}

/* CONFETTI */
.confetti{
position:fixed;
top:-10px;
width:10px;
height:10px;
animation:confettiFall 3s linear;
}

@keyframes confettiFall{
0%{transform:translateY(-10vh);}
100%{transform:translateY(100vh);}
}

/* HEART FALL */
@keyframes fall{
0%{transform:translateY(-10vh);}
100%{transform:translateY(110vh);}
}

/* ANIMATION */
@keyframes fadeUp{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}

@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* MOBILE */
@media (max-width:768px){

h1{font-size:28px;}

.gallery{
grid-template-columns:repeat(2,1fr);
padding:10px;
}

.gallery img{
height:140px;
}

button{
font-size:16px;
padding:12px 20px;
}

#cake{
font-size:80px;
}

.arrow{
font-size:30px;
}

}#proposalBox{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:white;
color:#ff4e8a;
padding:30px;
border-radius:20px;
text-align:center;
z-index:1000;
box-shadow:0 10px 40px rgba(0,0,0,0.4);
transition:0.5s;
}

#proposalBox.show{
transform:translate(-50%,-50%) scale(1);
}

#proposalBox button{
margin-top:15px;
background:#ff4e8a;
color:white;
}

#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(5px);
z-index:999;
display:none;
}

#overlay.show{
display:block;
}

#proposalBox{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:white;
color:#ff4e8a;
padding:30px;
border-radius:20px;
text-align:center;
z-index:1000;
box-shadow:0 10px 40px rgba(0,0,0,0.4);
transition:0.5s;
}

#proposalBox.show{
transform:translate(-50%,-50%) scale(1);
}

#proposalBox button{
margin-top:15px;
background:#ff4e8a;
color:white;
}