:root {
  --choice-bg-light: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 200, 200, 0.8));
  --choice-bg-light-hover: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 180, 180, 0.9));
  --choice-text: #870303;
  --choice-border: rgba(200, 100, 100, 0.6);
  --choice-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 3px 5px rgba(0, 0, 0, 0.15);
  --choice-shadow-hover: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 4px 7px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --choice-bg-light: linear-gradient(to bottom, rgba(70, 50, 50, 0.85), rgba(80, 60, 60, 0.8));
    --choice-bg-light-hover: linear-gradient(to bottom, rgba(90, 70, 70, 1), rgba(100, 80, 80, 0.85));
    --choice-text: #ffA1a1;
    --choice-border: rgba(180, 130, 130, 0.5);
    --choice-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.9), 0 3px 5px rgba(0, 0, 0, 0.4);
    --choice-shadow-hover: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 4px 7px rgba(0, 0, 0, 0.5);
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300px); /* Adjust based on header/footer height */
  padding: 20px;
}

.choice-button {
  display: block;
  width: 80%;
  max-width: 600px;
  margin: 10px 0;
  padding: 15px 25px;
  font-family: 'NeutralSans', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--choice-text);
  background: var(--choice-bg-light);
  border: 1px solid var(--choice-border);
  border-radius: 16px;
  box-shadow: var(--choice-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.choice-button:hover {
  background: var(--choice-bg-light-hover);
  box-shadow: var(--choice-shadow-hover);
}