*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
  font-family:'Poppins', sans-serif;
  background-image:
    linear-gradient(
    rgba(25,8,12,.45),
    rgba(60,15,25,.35)
    ),
    url("images/bg.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment: fixed;
  background-size:cover;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  position:relative;
}

.overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,240,245,0.18);
  backdrop-filter:blur(0.5px);
  z-index:1;
}

.hearts{
  position: absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:2;
}

.hearts span{
  position:absolute;
  bottom:-60px;
  color:rgba(255,105,180,0.45);
  font-size:18px;
  animation:floatingHearts 16s linear infinite;
}

.hearts span:nth-child(1)
{left:8%;animation-delay:0s;}
.hearts span:nth-child(2)
{left:20%;animation-delay:2s;}
.hearts span:nth-child(3)
{left:35%;animation-delay:4s;}
.hearts span:nth-child(4)
{left:50%;animation-delay: 1s;}
.hearts span:nth-child(5)
{left:65%;animation-delay:5s;}
.hearts span:nth-child(6)
{left:78%;animation-delay:3s;}
.hearts span:nth-child(7)
{left:88%;animation-delay:6s;}
.hearts span:nth-child(8)
{left:95%;animation-delay:7s;}

@keyframes floatingHearts{
  0%{
    transform:translateY(0) scale(0.7);
    opacity:0;
  }
  
  20%{
    opacity:1;
  }
  
  100%{
    transform:translateY(-120vh)
    scale(1.4);
    opacity:0;
  }
}
.hero{
  position:relative;
  z-index:3;
  text-align:center;
  padding:60px 50px;
  color:white;
  max-width:700px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:36px;
  box-shadow:0 8px 25px rgba(0,0,0,.10);
}

.hero h1{
  font-size:58px;
  letter-spacing:6px;
  font-weight:600;
  color:#fffaf2;
  text-shadow:
  0 2px 10px rgba(255,255,255,.45),
  0 0 25px rgba(255,235,210,.18);
}

.hero h2{
  font-family:'Great Vibes', cursive;
  font-size:42px;
  color:#fff6ef;
  margin:15px 0 20px;
  text-shadow:
  0 2px 8px rgba(255,255,255,.35);
}

.hero p{
  font-size:16px;
  line-height:1.6;
  margin:20px 0;
}

.hero h3{
  margin-top:20px;
  color:#f6d37a;
  font-family:'Great Vibes', cursive;
  font-size:34px;
  position:relative;
}
.hero h3::before{
  content:"";
  display:block;
  width:140px;
  height:1px;
  margin:0 auto 18px;
  background:linear-gradient(
  to right,
  transparent,
  rgba(212,175,55,.9),
  transparent
  );
}

button{
  margin-top:28px;
  padding: 14px 42px;
  border:none;
  border-radius: 40px;
  background :rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  color:#7a4b4b;
  cursor: pointer;
  font-weight:600;
  font-size:17px;
  letter-spacing:1px;
  transition:all .35s ease;
  box-shadow:
  0 0 18px rgba(255,255,255,.55),
  0 8px 22px rgba(255,180,200,.28);
}
button:hover{
  background:white;
  color:#5a3434;
  transform:translateY(-3px);
  box-shadow:
  0 12px 28px rgba(212,175,55,.25),
  0 0 18px rgba(212,175,55,.20);
}

/*=====PHOTO GALLERY=====*/
.gallery{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: linear-gradient(
  135deg,
  rgba(255,182,193,0.85),
  rgba(255,240,245,0.9),
  rgba(255,192,203,0.85)
  );
  z-index:100;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  backdrop-filter:blur(8px)
}

.gallery img{
  width:85%;
  max-width:380px;
  border-radius:25px;
  border:5px solid white;
  box-shadow:
  0 10px 30px rgba(255,105,180,0.4),
  0 0 25px rgba(255,182,193,0.6);
  
  animation:fadeIn 0.8s ease;
}

.gallery p{
  color:#fff;
  font-size:18px;
  margin-top:20px;
  text-align:center;
  padding:0 20px;
  text-shadow:0 2px 5px rgba(0,0,0,0.2);
}

#prevBtn,
#nextBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:28px;
  background:rgba(255,255,255,0.5);
  color:#d63384;
  border:none;
  width:55px;
  height:55px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

#prevBtn:hover,
#nextBtn:hover{
  background:white;
  transform:translateY(-50%) scale(1.1);
}

#prevBtn{left:15px;}
#nextBtn{right:15px;}

@keyframes fadeIn{
  from{opacity:0;
  transform:scale(0.9);
  }
  to{opacity:1;
  transform: scale(1);
  }
}

/*===== BUTTERFLIES ===== */
.butterflies{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:2;
  pointer-events:none;
}
.butterflies span{
  position:absolute;
  font-size:24px;
  animation:flyButterflies 12s linear
  infinite;
  opacity:0;
}

.butterflies span:nth-child(1)
{left:10%;animation-delay:0s;}
.butterflies span:nth-child(2)
{left:30%;animation-delay:3s;}
.butterflies span:nth-child(3)
{left:60%;animation-delay:6s;}
.butterflies span:nth-child(4)
{left:80%;animation-delay:9s;}

@keyframes flyButterflies{
  0%{
    transform:translateY(100vh)
    translateX(0)scale(0.8);
    opacity:0;
  }
  20%{opacity:1;}
  100%{
    transform:translateY(-120vh)
    opacity:0;
  }
}
/*===== PAGE 3 =====*/
.page3{
  display:none;
  position:fixed;
  overflow:hidden;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:100;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:25px;
  text-align:center;
}
.page3 h1{
  font-family:'Great Vibes', cursive;
  font-size:42px;
  color:brown;
  margin-bottom:20px;
}
.letter-box{
  max-width:600px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  border-radius:20px;
  padding:25px;
  color:brown;
  font-size:18px;
  line-height:1.8;
}
.letter-box p{
  text-align:left;
}
#toPage4{
  margin-top:20px;
  padding:12px 28px;
  background:white;
  color:#d63384;
  border:none;
  border-radius:30px;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}
#toPage4:hover{
  transform:scale(1.08);
  background:#ffe6f0;
}
/*===== FLOATING HEARTS =====*/

#heartContainer{
  position:relative;
  width:100%;
  height:350px;
  overflow:hidden;
}

.heart{
  position:absolute;
  width:50px;
  height:50px;
  background:#ff4d6d;
  color:white;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  font-size:24px;
  animation:floatHeart 6s ease-in-out
  infinite;
  transition:0.3s;
}

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

  @keyframes floatHeart{
  
0%{
  transform:translate(0px,0px);
  rotate(-8deg);
}
25%{
  transform:translate(10px,-15px)
  rotate(5deg);
}

50%{
  transform:translate(-10px,-30px)
  rotate(-5deg);
}
75%{transform:translate(8px.-15px)
rotate(6deg);
}

100%{
  transform:translate(0px,0px)
  rotate(-8deg);
}
}
@keyframes popHeart{
  0%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.5);
    opacity:1;
  }
  100%{
    transform:scale(0);
    opacity:0;
  }
 }
    
  .pop{
    animation:popHeart 0.4s forwards;
  }
  .showReason{
   animation:fadeReason 0.6s;
  }
  
   @keyframes fadeReason{
    from{
      opacity:0;
      transform:translateY(10px);
    }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/*===== PAGE 5 =====*/
#page5 h1{
  font-family:'Great Vibes',cursive;
  font-size:54px;
  color:#ff4d6d;
  animation:glow 2s ease-in-out infinite;
}
#page5 h2{
  margin-top:25px;
  color:#d63384;
  font-family:'Great Vibes',cursive;
  font-size:38px;
}
#finalmessage{
  font-size:20px;
  line-height:1.8;
  animation:heartbeat 2s infinite;
}
@keyframes glow{
  
  0%{
    text-shadow:0 0  8px #ffb6c1;
  }
  50%{
    text-shadow:
    0 0 18px #ff4d6d,
    0 0 30px #ff85a2;
  }
  100%{
    text-shadow:0 0 8px #ffb6c1;
  }
  
}
@keyframes heartbeat{
  
  0%{
    transform:scale(1);
  }
  
  50%{
    transform:scale(1.03);
  }
  
  100%{
    transform:scale(1);
  }
  
}

/*===== FALLING PETALS =====*/
#petals{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
}
#petals span{
  position: absolute;
  top:40px;
  font-size:26px;
  color:#ff8fab;
  animation:fallPetals linear infinite;
}
/*Different positions and speeds*/
#petals span:nth-child(1){
  left:8%;
  animation-duration: 8s;
}
#petals span:nth-child(2){
  left:20%;
  animation-duration:10s;
}
#petals span:nth-child(3){
  left:35%;
  animation-duration:9s;
}
#petals span:nth-child(4){
  left:50%;
  animation-duration:11s;
}
#petals span:nth-child(5){
  left:65%;
  animation-duration: 8s;
}
#petals span:nth-child(6){
  left:78%;
  animation-duration: 10s;
}
#petals span:nth-child(7){
  left:88%;
  animation-duration: 9s;
}
#petals span:nth-child(8){
  left:95%;
  animation-duration: 11s;
}
@keyframes fallPetals{
  0%{
    transform:translateY(-40px)
    rotate(0deg);
    opacity:0;
  }
  
  10%{
    opacity:1;
  }
  
  100%{
    transform:translateY(110vh)
    rotate(360deg);
}
}
#fireworks{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}
/*==========================
 VAN GOGH gallery
 ==========================*/
 .gallery{
   display:none;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   overflow:hidden;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   background:linear-gradient(
   180deg,
   #08142d 0%,
   #102b57 50%,
   #1a3d73 100%
   );
   z-index:100;
 }
 
 .gallery-overlay{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:
   radial-gradient(
   circle at top right,
   rgba(255,210,90,.18),
   transparent 30%
   ),
   
   radial-gradient(circle at bottom left,
   rgba(255,255,255,.08),
   transparent 35%);
 }
 .gallery-title{
   position:relative;
   z-index:5;
   font-family:'Great Vibes',cursive;
   font-size:42px;
   color:#f7d77b;
   text-shadow:
   0 0 15px rgba(255,215,0,.5);
   margin-bottom:8px;
 }
 .gallery-subtitle{
   position:relative;
   z-index:5;
   font-size:18px;
   color:#fff7da;
   margin-bottom:35px;
 }
 .frame-area{
   position:relative;
   display:flex;
   justify-content:center;
   align-items:center;
   z-index:5;
 }
 .photo-frame{
   padding:12px;
   background:#efe1ba;
   border-radius:12px;
   box-shadow:
   0 0 40px rgba(0,0,0,.5);
 }
 .photo-frame img{
   display:block;
   width:380px;
   max-width:90vw;
   border-radius:8px;
   border:4px solid #fff;
 }
 #photoCounter{
   margin-top:25px;
   font-size:20px;
   color:#f7d77b;
   font-weight:bold;
   z-index:5;
 }
 #photoText{
   margin-top:10px;
   max-width:500px;
   text-align:center;
   font-size:18px;
   line-height:1.6;
   color:#fff6d8;
   padding:0 20px;
   z-index:5;
 }
 #prevBtn,
 #nextBtn{
   position:fixed;
   top:50%;
   transform:translateY(-50%);
   width:60px;
   height:60px;
   border:none;
   border-radius:50%;
   background:rgba(255,215,0,.15);
   color:#f7d77b;
   font-size:28px;
   cursor:pointer;
   backdrop-filter:blur(8px);
   transition:.3s;
 }
 #prevBtn{
 left:25px;
 }
 #nextBtn{
 right:25px;
 }
 #prevBtn:hover,
 #nextBtn:hover{
   background:#f7d77b;
   color:#102b57;
   transform:translateY(-50%) scale(1.1);
 }
 /*==========================
  TWINKLING STARS
  ==========================*/
  .stars{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
    pointer-events:none;
  }
  .stars::before,
  .stars::after{
    content:"";
    position:absolute;
    width:3px;
    height:3px;
    background:white;
    border-radius:50%;
    box-shadow:
    50px 80px white,
    120px 40px #ffe28a,
    180px 150px white,
    250px 70px #ffd86b,
    320px 190px white,
    420px 120px #ffe28a,
    520px 60px white,
    620px 180px #ffd86b,
    720px 90px white,
    820px 210px white,
    920px 50px #ffe28a,
    1020px 170px white;
    animation:twinkle 3s ease-in-out infinite
    alternate;
  }
  .stars::after{
    animation-delay:1.5s;
    opacity:.6;
  }
  @keyframes twinkle{
    0%{
    opacity:.2;
    transform:scale(.8);
  }
  100%{
  opacity:1;
  transform:scale(1.4);
  }
}
#prevBtn,
#nextBtn{
  z-index:999;
}
/*==========================
 VAN GOGH FLOWERS
 ==========================*/
 .flower{
   position:absolute;
   width:120px;
   height:120px;
   opacity:.9;
 }
 .flower::before{
   content:"\1F33B";
   position:absolute;
   font-size:90px;
   animation:flowerGlow 3s ease-in-out
  infinite alternate;
 }
 .flower-left{
   left:-90px;
   top:50%;
   transform:translateY(-50%)
  rotate(-15deg);
   }
   .flower-right{
     right:-90px;
     top:50%;
     transform:translateY(-50%)
    rotate(15deg);
   }
   @keyframes flowerGlow{
     from{
       filter:drop-shadow(0 0 8px
    rgba(255,215,0,.5));
            transform:scale(1);
     }
     to{
       filter:drop-shadow(0 0 20px
    rgba(255,215,0,.9));
            transform:scale(1.08);
     }
   }
   /*==========================
   DECORATIVE FLOWERS
   ==========================*/
   body::before,
   body::after{
     content:"\1F339";
     position:fixed;
     font-size:180px;
     opacity:.18;
     z-index:0;
     pointer-events:none;
     filter:blur(1px);
   }
   body::before{
     top:-50px;
     left:-50px;
     transform:rotate(-20deg) scale(1.1);
   }
   body::after{
     bottom:-50px;
     right:-50px;
     transform:rotate(20deg) scale(1.1);
   }
   
   .hero::before,
   .hero::after{
     content:"";
     position:absolute;
     width:180px;
     height:180px;
     pointer-events:none;
     opacity:.55;
   }
   .hero::before{
     top:-35px;
     left:-35px;
     border-top:2px solid
    rgba(212,175,55,.65);
    border-left:2px solid
    rgba(212,175,55,.65);
    border-top-left-radius:180px;
   }
   .hero::after{
     bottom:-35px;
     right:-35px;
     border-bottom:2px solid
       rgba(212,175,55,.65);
     border-right:2px solid
      rgba(212,175,55,.65);
     border-bottom-right-radius:180px;
   }
 /*==========================
  ELEGANT GOLD BORDER
  ==========================*/
  .page-border{
    position:fixed;
    top:24px;
    left:24px;
    right:24px;
    bottom:24px;
    border:1px solid rgba(212,175,55,.35);
    border-radius:30px;
    pointer-events:none;
    z-index:2;
    box-shadow:
    0 0 25px rgba(212,175,55,.15),
    inset 0 0 20px rgba(212,175,55,.08);
  }
  /*==========================
   GOLDEN CORNER ORNAMENTS
   ==========================*/
   .page-border::before,
   .page-border::after{
     content:"";
     position:absolute;
     width:80px;
     height:80px;
     border:2px solid rgba(212,175,55,.6);
     pointer-events:none;
   }
   .page-border::before{
     top:-2px;
     left:-2px;
     border-right:none;
     border-bottom:none;
     border-top-left-radius:24px;
   }
   .page-border::after{
     bottom:-2px;
     right:-2px;
     border-left:none;
     border-top:none;
     border-bottom-right-radius:24px;
   }
/*==========================
  STAR PUZZLE PAGE
===========================*/
.pagePuzzle{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:150;
}
.nightSky{
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle at top,#274b8f
  0%,#12264d 35%,#08142d 70%,#030712 100%);
}
#starField{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.star{
  position:absolute;
  width:2px;
  height:2px;
  background:white;
  border-radius:50%;
  box-shadow:0 0 10px
  rgba(255,255,255,.9);
  animation:twinkle 2.5s ease-in-out
  infinite;
}
@keyframes twinkle{
  0%,100%{
    opacity:.25;
    transform:scale(.8);
  }
  50%{
  opacity:1;
  transform:scale(1.8);
}
}
/*==========================
FALLING STARS
==========================*/
#fallingStars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.fallingStar{
  position:absolute;
  width:5px;
  height:5px;
  background:white;
  border-radius:50%;
  box-shadow:
  0 0 10px white,
  0 0 20px #9fdcff;
}
.fallingStar::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:80px;
  height:2px;
  background:linear-gradient(
  to left,
  rgba(255,255,255,0 ),
  rgba(255,255,255,.8)
  );
  transform-origin:left center;
}
@keyframes starFall{
  0%{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  100%{
    transform:translateY(85vh) scale(.8);
    opacity:0;
  }
}
.storyText{
  position:relative;
  z-index:5;
  max-width:700px;
  text-align:center;
  padding:20px;
}
/*==========================
 GLASS PUZZLE BOARD
 ==========================*/
 #glassPuzzle{
   position:relative;
   z-index:6;
   width:330px;
   height:330px;
   margin-top:50px;
   display:grid;
   grid-template-columns:repeat(3,1fr);
   grid-template-rows:repeat(3,1fr);
   gap:4px;
   opacity:0;
   transform:scale(.85);
   transition:all .8s ease;
 }
 #glassPuzzle.show{
   opacity:1;
   transform:scale(1);
 }
 #glassPuzzle.completed{
   transform:scale(1.08);
   filter:drop-shadow(0 0 25px
   rgba(255,255,255,.9));
   transition:all .8s ease;
 }
 .puzzlePiece{
   border-radius:12px;
   background:rgba(255,255,255,.12);
   backdrop-filter:blur(10px);
   border:1px solid rgba(255,255,255,.25);
   box-shadow:
   0 0 12px rgba(255,255,255,.15);
   cursor:pointer;
 }
#starTitle{
  font-family:'Great Vibes',cursive;
  font-size:52px;
  color:#ffffff;
  text-shadow:
  0 0 15px rgba(255,255,255,.6),
  0 0 35px rgba(173,216,255,.35);
  margin-bottom:18px;
}
#starSubtitle{
  font-size:22px;
  color:#f7f3dc;
  line-height:1.8;
  text-shadow: 
  0 0 12px rgba(255,255,255,.25);
}