/* Reset básico */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  height: 100vh;
  font-family: Arial, sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background: linear-gradient(135deg,#ff758c,#ff7eb3);
  animation: backgroundMove 15s infinite alternate;
}

@keyframes backgroundMove {
  0% { background-position:0 0; }
  50% { background-position:100% 100%; }
  100% { background-position:0 0; }
}

.container {
  text-align:center;
  background:white;
  padding:50px 60px;
  border-radius:30px;
  box-shadow:0 15px 30px rgba(0,0,0,0.3);
  animation: aparecer 1s ease forwards;
}

@keyframes aparecer {
  from { opacity:0; transform:scale(0.8); }
  to { opacity:1; transform:scale(1); }
}

h1 {
  color:#e91e63;
  font-size:28px;
  margin-bottom:20px;
  min-height:50px;
}

button {
  padding:15px 30px;
  font-size:18px;
  border:none;
  border-radius:20px;
  cursor:pointer;
  margin:15px;
  position:relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

#yes {
  background:#4CAF50;
  color:white;
}

#yes:hover { transform:scale(1.1); box-shadow:0 8px 20px rgba(76,175,80,0.6); }

#no {
  background:#f44336;
  color:white;
  position:absolute;
}

#no:hover { transform:scale(1.1); box-shadow:0 8px 20px rgba(244,67,54,0.6); }

/* Corações */
.heart {
  position:absolute;
  font-size:28px;
  animation: subir 4s ease forwards;
}

/* Confetes */
.confetti {
  position:fixed;
  width:8px;
  height:8px;
  opacity:0.8;
  animation:cair 3s linear forwards;
}

@keyframes subir {
  from { opacity:1; transform:translateY(0) rotate(0deg); }
  to { opacity:0; transform:translateY(-600px) rotate(720deg) scale(2); }
}

@keyframes cair {
  from { transform:translateY(-50px) rotate(0deg); opacity:1; }
  to { transform:translateY(600px) rotate(720deg); opacity:0; }
}