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

body{
font-family:'Poppins',sans-serif;
background:#0f172a;
overflow-x:hidden;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
z-index:1;
}

.container{
position:relative;
z-index:2;
text-align:center;
padding:20px;
}

.cover-photo{
width:180px;
height:180px;
object-fit:cover;
border-radius:50%;
border:5px solid #f9a8d4;
box-shadow:0 0 30px #f9a8d4;
margin-bottom:20px;
}

h1{
font-family:'Parisienne',cursive;
font-size:4rem;
color:#fff;
margin-bottom:25px;
}

button{
background:#f9a8d4;
border:none;
padding:15px 30px;
border-radius:50px;
font-size:1rem;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:scale(1.08);
}

.envelope{
max-height:0;
overflow:hidden;
transition:1.2s;
}

.envelope.open{
max-height:900px;
}

.letter{
margin:auto;
max-width:700px;
background:#fffdf8;
padding:40px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,.3);
}

.letter h2{
font-family:'Parisienne',cursive;
font-size:3rem;
margin-bottom:20px;
color:#e11d48;
}

.letter p{
line-height:1.9;
color:#444;
white-space:pre-line;
}

.letter h3{
margin-top:25px;
color:#e11d48;
}

.film-strip{
position:fixed;
top:0;
height:100%;
width:170px;
background:black;
display:flex;
flex-direction:column;
gap:20px;
padding:20px;
overflow:hidden;
z-index:0;
}

.film-strip img{
width:100%;
height:180px;
object-fit:cover;
border:5px solid white;
}

.left{
left:0;
animation:scrollUp 20s linear infinite;
}

.right{
right:0;
animation:scrollDown 20s linear infinite;
}

@keyframes scrollUp{
0%{transform:translateY(0);}
100%{transform:translateY(-300px);}
}

@keyframes scrollDown{
0%{transform:translateY(-300px);}
100%{transform:translateY(0);}
}

.heart{
position:fixed;
font-size:20px;
animation:float 6s linear forwards;
color:#ff5ca8;
}

@keyframes float{
0%{
transform:translateY(0);
opacity:1;
}
100%{
transform:translateY(-100vh);
opacity:0;
}
}

@media(max-width:768px){

.film-strip{
display:none;
}

h1{
font-size:3rem;
}

.cover-photo{
width:140px;
height:140px;
}

.letter{
padding:25px;
}
}