body{
margin:0;
padding:0;
font-family:'Segoe UI',sans-serif;
background:black;
color:white;
overflow-x:hidden;
}

#countdownScreen{
position:fixed;
width:100%;
height:100%;
background:black;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
}

#countdown{
font-size:80px;
color:#ff4d6d;
}

canvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.hero h1{
font-size:45px;
margin-bottom:30px;
}

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

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

.main{
display:none;
min-height:100vh;
justify-content:center;
align-items:center;
padding:20px;
}

.card{
max-width:800px;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(15px);
padding:30px;
border-radius:25px;
text-align:center;
box-shadow:0 0 40px rgba(255,77,109,0.5);
}

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

.card p{
line-height:1.8;
font-size:16px;
min-height:200px;
}

.heart{
position:fixed;
color:#ff4d6d;
animation:float 6s linear infinite;
}

@keyframes float{
0%{transform:translateY(100vh) scale(0.5);}
100%{transform:translateY(-10vh) scale(1.5);}
}

@media(max-width:600px){
.hero h1{font-size:32px;}
.photo{width:140px;height:140px;}
}