/* Full viewport layout and animated background */
html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: changeBackground 12s infinite;
  transition: background 1s ease-in-out;
}

/* Background animation keyframes */
@keyframes changeBackground {
  0% {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
  }
  25% {
    background: linear-gradient(to right, #a1c4fd, #c2e9fb);
  }
  50% {
    background: linear-gradient(to right, #fbc2eb, #a6c1ee);
  }
  75% {
    background: linear-gradient(to right, #d4fc79, #96e6a1);
  }
  100% {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
  }
}

/* Centered container */
.center-box {
  background: #ffffffcc;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 90%;
  max-width: 500px;
  animation: fadeIn 1s ease-in;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Question text */
h2 {
  font-size: 1.8em;
  margin-bottom: 20px;
  color: #444;
}

/* Button container */
.button-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin-top: 20px;
}

/* Option buttons */
.option-button {
  display: block;
  width: 80%;
  max-width: 400px;
  padding: 15px 20px;
  text-align: center;
  font-size: 1.1em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to right, #ff758c, #ff7eb3);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Input styling (if used on other pages) */
input[type='text'] {
  padding: 12px;
  font-size: 1em;
  width: 80%;
  border-radius: 8px;
  border: 2px solid #ff6f61;
  background-color: #fff8f0;
  transition: border-color 0.3s ease;
}

input[type='text']:focus {
  border-color: #ff4081;
  outline: none;
}

/* Submit button (if used on other pages) */
button {
  margin-top: 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1em;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}
.fancy-heading {
  margin-bottom: 30px;
  animation: fadeSlideDown 1s ease;
}

.fancy-heading h2 {
  font-size: 2em;
  color: #ff6f91;
  margin: 0;
  text-shadow: 1px 1px 2px #fff;
}

.subtext {
  font-size: 1.2em;
  color: #555;
  margin-top: 10px;
}

/* Entrance animation */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}