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

html{
scroll-behavior:smooth;
}

body{
background:linear-gradient(135deg,#09091a,#1b1b3a,#2d0f32);
color:white;
overflow-x:hidden;
}


.hidden{
display:none;
}


/* PASSWORD */

.password-screen{

height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;

}


.glass{

width:350px;
padding:40px;
text-align:center;

background:rgba(255,255,255,.1);
backdrop-filter:blur(20px);

border-radius:25px;

border:1px solid rgba(255,255,255,.2);

box-shadow:0 0 40px rgba(255,255,255,.1);

}


.glass h1{

font-size:35px;
margin-bottom:20px;

}


.pass-text{

opacity:.8;
margin-bottom:20px;

}


input{

width:100%;
padding:14px;

border:none;
outline:none;

border-radius:15px;

margin-bottom:20px;

}



button{

padding:14px 35px;

border:none;

border-radius:50px;

background:#ff5fa2;

color:white;

font-size:17px;

cursor:pointer;

transition:.4s;

}



button:hover{

transform:scale(1.08);

box-shadow:0 0 25px pink;

}



/* INTRO */

.intro{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

text-align:center;

animation:fade 2s;

}


.intro h2{

font-size:40px;

}


.intro h3{

font-size:30px;

color:pink;

margin-top:20px;

}




/* HERO */


.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

text-align:center;

padding:30px;

}



.hero h1{

font-size:55px;

margin-bottom:25px;

}



.hero p{

font-size:20px;

line-height:1.8;

max-width:600px;

}




/* PHOTO STORY */


.gallery{

padding:80px 20px;

text-align:center;

}



.gallery h2{

font-size:40px;

}



.gallery-text{

margin:20px;

opacity:.8;

}



.story-container{

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

margin-top:40px;

}



.story-photo{

width:350px;

height:450px;

object-fit:cover;

border-radius:25px;

cursor:pointer;

box-shadow:0 0 40px rgba(255,100,180,.5);

animation:photoPop .8s ease;

}



@keyframes photoPop{

0%{

transform:scale(.5);

opacity:0;

}


70%{

transform:scale(1.1);

}


100%{

transform:scale(1);

opacity:1;

}

}



#tapText{

margin-top:20px;

font-size:18px;

color:pink;

}




/* GIFT */


.gift-section{

padding:100px 20px;

text-align:center;

}



.gift-box{

font-size:100px;

cursor:pointer;

display:inline-block;

margin:30px;

animation:giftFloat 2s infinite;

}



@keyframes giftFloat{


50%{

transform:translateY(-15px);

}


}



.open{

transform:scale(1.3) rotate(15deg);

}




/* LETTER */


.letter{

max-width:750px;

margin:50px auto;

padding:40px;

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

backdrop-filter:blur(15px);

border-radius:25px;

border:1px solid rgba(255,255,255,.2);

}



.letter h2{

font-family:cursive;

text-align:center;

margin-bottom:30px;

}



#letterText{

font-family:"Segoe Print",cursive;

font-size:21px;

line-height:2;

}



.show-letter{

animation:letterReveal 1.5s ease;

}



@keyframes letterReveal{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}




/* STARS */


#stars,#hearts{

position:fixed;

width:100%;

height:100%;

top:0;

pointer-events:none;

}



.star{

position:absolute;

width:3px;

height:3px;

background:white;

border-radius:50%;

animation:twinkle 2s infinite;

}


@keyframes twinkle{

50%{

opacity:.3;

}

}



.heart{

position:absolute;

font-size:20px;

animation:heart 7s linear infinite;

}



@keyframes heart{


from{

transform:translateY(100vh);

}


to{

transform:translateY(-100vh);

}

}





/* END */


.ending{

padding:100px 20px;

text-align:center;

}


.ending h1{

font-size:50px;

}



@media(max-width:768px){


.hero h1{

font-size:38px;

}


.story-photo{

width:280px;

height:350px;

}


#letterText{

font-size:18px;

}


}