:root{ background-image:url('bg.jpg');}
*{box-sizing:border-box}
html,body{
  background-image:url('bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;height:100%}
body{
  margin:0; padding:16px;
  min-height:100vh;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#fff; text-align:center; overflow:hidden;
}
.card{
  width:min(92vw,420px);
  background:rgba(255,255,255,.15);
  padding:clamp(20px,4vw,40px);
  border-radius:24px; backdrop-filter: blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
}
h1{font-size:clamp(1.6rem,4.8vw,2.2rem); margin:0 0 8px}
h2{font-size:clamp(1.3rem,4.2vw,1.7rem); margin:12px 0}
p{font-size:clamp(.95rem,3.6vw,1.1rem); line-height:1.6}

.buttons{
  margin-top:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  width:100%;
}
button{
  border:none; padding:12px 20px; font-size:clamp(.9rem,3.5vw,1rem);
  border-radius:999px; cursor:pointer; transition:.25s ease;
  max-width:44%; white-space:nowrap;
}
#yes{background:#00ffae;color:#003d2a}
#no{background:#ff3d6e;color:#fff}

.heart{position:fixed;font-size:20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:0}}

/* Tablets */
@media (min-width:600px){
  .buttons{min-height:110px}
  #yes{left:1%}
  #no{left:3%}
}

/* Small phones */
@media (max-width:360px){
  .card{padding:18px}
  button{max-width:48%}
  #yes{left:14%}
  #no{left:58%}
}


/* Romantic background enhancements */
/* overlay without blurring content */
body::after{
  content:"";
  position:fixed;inset:0;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));
  pointer-events:none;
  z-index:0;
}
.card, .card *{position:relative;z-index:1;}
body::before{
  content:"";
  position:fixed;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.25),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.18),transparent 40%);
  pointer-events:none;
}
.romantic-heart{position:fixed;color:rgba(255,255,255,.7);animation:floatUp linear infinite}
@keyframes floatUp{from{transform:translateY(110vh) scale(.6);opacity:.8}to{transform:translateY(-10vh) scale(1.2);opacity:0}}