* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Georgia', serif;
    background: linear-gradient(135deg, #fff5f7, #ffe4ec);
    overflow: hidden;
    color: #8b3158;
}


.page {

    display:none;
    height:100vh;
    width:100%;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    text-align:center;

    padding:30px;

    animation: fade 1s ease;

}


.page.active {
    display:flex;
}


@keyframes fade {

from {
    opacity:0;
    transform:translateY(20px);
}

to {
    opacity:1;
    transform:translateY(0);
}

}



h1 {

font-size:42px;
margin-bottom:10px;

color:#d63384;

text-shadow:
0 2px 10px rgba(214,51,132,0.2);

}



h2 {

font-size:24px;
color:#a61e4d;

}



button {

margin-top:30px;

padding:16px 35px;

border:none;

border-radius:50px;

background:
linear-gradient(45deg,#ff7096,#ff9eb5);

color:white;

font-size:18px;

box-shadow:
0 10px 25px rgba(255,112,150,.3);

transition:.3s;

}



button:active {

transform:scale(.95);

}



.envelope {

font-size:120px;

cursor:pointer;

animation:
bounce 2s infinite;

}



@keyframes bounce {

50% {
transform:translateY(-15px);
}

}



.hidden {

display:none;

}



#letterBox {

background:white;

max-width:500px;

padding:30px;

border-radius:25px;

box-shadow:
0 20px 50px rgba(0,0,0,.1);

line-height:1.8;

}



#reasonBox div {

background:white;

padding:18px;

margin:15px;

border-radius:20px;

box-shadow:
0 10px 20px rgba(0,0,0,.08);

animation:
pop .5s ease;

}



@keyframes pop {

from {
transform:scale(.8);
opacity:0;
}

to {
transform:scale(1);
opacity:1;
}

}



.photos {

display:flex;

gap:20px;

}



.photos div {

font-size:40px;

background:white;

padding:40px;

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.1);

}



#flowers {

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

}



.petal {

position:absolute;

font-size:25px;

animation:
fall linear infinite;

}



@keyframes fall {


from {

transform:
translateY(-10vh)
rotate(0deg);

}


to {

transform:
translateY(110vh)
rotate(360deg);

}

}
/* Envelope */

.env {

width:260px;
height:170px;

background:#ffb6c8;

position:relative;

border-radius:10px;

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

overflow:hidden;

cursor:pointer;

}



.flap {

position:absolute;

top:0;
left:0;

width:0;
height:0;

border-left:130px solid transparent;
border-right:130px solid transparent;
border-top:90px solid #ff8fab;

transform-origin:top;

transition:1s;

z-index:3;

}



.paper {

position:absolute;

background:white;

width:220px;

height:130px;

left:20px;

top:40px;

border-radius:8px;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

transition:1s;

z-index:2;

}



.envelope.open .flap {

transform:rotateX(180deg);

}



.envelope.open .paper {

transform:
translateY(-100px);

}



.envelope p {

margin-top:25px;

font-size:18px;

}
/* Love Reasons Hearts */


.heart-grid {

display:grid;

grid-template-columns:
repeat(3, 90px);

gap:25px;

margin-top:30px;

}



.love-heart {

width:90px;

height:90px;

background:#ff85a2;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:35px;

cursor:pointer;

border-radius:50%;

box-shadow:
0 10px 25px rgba(255,100,150,.3);

transition:.5s;

}



.love-heart:hover {

transform:scale(1.1);

}



.love-heart.flipped {

background:white;

color:#d63384;

font-size:14px;

padding:10px;

transform:scaleX(-1);

}


.love-heart.flipped span {

display:block;

transform:scaleX(-1);

}



.love-heart span {

transition:.5s;

}


@media(max-width:600px){

.heart-grid{

grid-template-columns:
repeat(3,70px);

}


.love-heart{

width:70px;
height:70px;

}

}
/* Polaroid Gallery */

.photos {

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;

max-width:900px;

}


.photo-card {

background:white;

padding:12px;
padding-bottom:25px;

width:190px;

border-radius:5px;

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

transition:.5s;

cursor:pointer;

transform:rotate(-3deg);

}


.photo-card:nth-child(even){

transform:rotate(4deg);

}


.photo-card:hover {

transform:
scale(1.15)
rotate(0deg);

z-index:5;

}


.photo-card img {

width:100%;

height:180px;

object-fit:cover;

}


.photo-card p {

font-family:cursive;

font-size:15px;

color:#8b3158;

margin-top:15px;

}
.photo-card.big {

position:fixed;

top:50%;

left:50%;

transform:
translate(-50%,-50%)
scale(1.8)
rotate(0deg);

z-index:100;

}
/* Opening Animation */

#intro {

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#fff0f5;

display:flex;

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

z-index:9999;

animation:
introFade 2s ease forwards;

}



.intro-flower {

font-size:80px;

animation:
flowerPop 1s ease;

}



@keyframes flowerPop {

from {

transform:scale(.5);

opacity:0;

}

to {

transform:scale(1);

opacity:1;

}

}



@keyframes introFade {

0% {

opacity:1;

}

80% {

opacity:1;

}

100% {

opacity:0;

visibility:hidden;

}

}
/* Final Page */


.final-heart {

font-size:120px;

animation:
heartbeat 1.5s infinite;

}



@keyframes heartbeat {


0% {

transform:scale(1);

}


25% {

transform:scale(1.15);

}


40% {

transform:scale(1);

}


60% {

transform:scale(1.1);

}


100% {

transform:scale(1);

}


}



.final-title {

animation:
fadeUp 2s ease;

}



#ending {

max-width:500px;

font-size:20px;

line-height:1.8;

animation:
fadeUp 3s ease;

}



@keyframes fadeUp {

from {

opacity:0;

transform:translateY(30px);

}


to {

opacity:1;

transform:translateY(0);

}

}
#musicButton {

position:fixed;

top:20px;
right:20px;

width:55px;
height:55px;

border-radius:50%;

padding:0;

font-size:24px;

z-index:999;

background:#ff85a2;

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

}