body{
margin:0;
font-family:Arial;

background-image:url("https://images.unsplash.com/photo-1518199266791-5375a83190b7");
background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;
text-align:center;
overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,80,120,0.5);
z-index:-1;
}

section{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:40px;
}

h1{
font-size:42px;
}

button{
padding:15px 30px;
font-size:18px;
border:none;
border-radius:40px;
background:white;
color:#ff3f7f;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.15);
box-shadow:0 0 20px pink;
}

/* container 3D */

.heart-container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
perspective:800px;
}

/* coração 3D */

.heart{
position:absolute;
width:20px;
height:20px;
background:red;
transform:rotate(45deg);
animation:float3D linear forwards;
}

.heart::before,
.heart::after{
content:"";
position:absolute;
width:20px;
height:20px;
background:red;
border-radius:50%;
}

.heart::before{
top:-10px;
left:0;
}

.heart::after{
left:-10px;
top:0;
}

@keyframes float3D{

0%{
transform:
translateY(100vh)
translateZ(0)
rotate(45deg)
scale(0.8);
opacity:0;
}

20%{
opacity:1;
}

100%{
transform:
translateY(-120vh)
translateZ(200px)
rotate(405deg)
scale(1.4);
opacity:0;
}

}

/* carta */

.carta{
background:white;
color:#ff3f7f;
padding:30px;
border-radius:20px;
max-width:600px;
display:none;
animation:abrirCarta 1s;
}

@keyframes abrirCarta{

0%{
transform:scale(0.3) rotateX(80deg);
opacity:0;
}

100%{
transform:scale(1) rotateX(0);
opacity:1;
}

}

.surpresa{
display:none;
font-size:28px;
margin-top:20px;
}

.timer{
font-size:30px;
margin-top:20px;
}



#especial{
background:rgba(255,255,255,0.15);
backdrop-filter:blur(8px);
border-radius:20px;
margin:40px;
padding:50px;
}

.texto-especial{
max-width:700px;
font-size:22px;
line-height:1.8;
}

.linha{
opacity:0;
transform:translateY(40px);
animation:aparecer 1s forwards;
}

.linha:nth-child(1){animation-delay:0.5s;}
.linha:nth-child(2){animation-delay:1.5s;}
.linha:nth-child(3){animation-delay:2.5s;}
.linha:nth-child(4){animation-delay:3.5s;}
.linha:nth-child(5){animation-delay:4.5s;}
.linha:nth-child(6){animation-delay:5.5s;}

.destaque{
font-size:26px;
font-weight:bold;
color:#ffd6e8;
}

@keyframes aparecer{

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

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

}




/* carta escrevendo */

#carta-animada{
background:rgba(255,255,255,0.15);
backdrop-filter:blur(8px);
padding:60px;
}

.maquina-escrever{
font-size:24px;
max-width:700px;
line-height:1.7;
}

/* eu te amo gigante */

#amor-gigante{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.eu-te-amo{
font-size:80px;
text-align:center;
color:white;
animation:pulsar 2s infinite;
text-shadow:0 0 20px pink;
}

#nomeDelas{
color:#ffd1e6;
}

@keyframes pulsar{

0%{
transform:scale(1);
text-shadow:0 0 20px pink;
}

50%{
transform:scale(1.1);
text-shadow:0 0 50px #ff7fb0;
}

100%{
transform:scale(1);
text-shadow:0 0 20px pink;
}

}