For Yasmine 🩸
body{
margin:0;
height:100vh;
background:radial-gradient(circle at top,#1b0f14,#000);
color:#f5f5f5;
font-family:'Georgia',serif;
overflow:hidden;
}
#stars, #flowers{
position:fixed;
width:100%;
height:100%;
pointer-events:none;
}
.star{
position:absolute;
width:2px;
height:2px;
background:white;
animation:twinkle 3s infinite;
}
@keyframes twinkle{
0%,100%{opacity:.2}
50%{opacity:1}
}
.flower{
position:absolute;
font-size:22px;
animation:fall linear infinite;
}
@keyframes fall{
from{transform:translateY(-10vh);opacity:1}
to{transform:translateY(110vh);opacity:0}
}
#container{
position:relative;
z-index:2;
max-width:720px;
margin:auto;
top:50%;
transform:translateY(-50%);
text-align:center;
padding:20px;
}
#text{
min-height:90px;
font-size:1.4rem;
line-height:1.6;
}
h1{
font-size:2.6rem;
margin:25px 0;
}
button{
padding:16px 42px;
font-size:18px;
border:none;
border-radius:14px;
cursor:pointer;
transition:.4s;
}
#yes{
background:linear-gradient(135deg,#8b0000,#ff4d6d);
color:white;
box-shadow:0 0 30px #ff4d6d66;
animation:pulse 2s infinite;
}
#no{
background:#1c1c1c;
color:#aaa;
position:absolute;
}
#msg{
margin-top:20px;
opacity:.8;
}
@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.fade{
animation:fade 2s forwards;
}
@keyframes fade{
from{opacity:0}
to{opacity:1}
}