@import url(global.css);

.welcome-slide {
  background-color: var(--welcome-background);
  color: var(--welcome-text-color);
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: fixed; /* Fix to viewport */
  top: 60px; /* Adjust for header height */
  left: 0;
  width: 100%;
  height: calc(100% - 60px); /* Adjust for header height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Ensure it's above other content */
}

.welcome-slide-button {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: #4a90e2; /* Calm blue button */
  color: #ffffff; /* White text for contrast */
  cursor: pointer;
  margin-top: 1rem;
  font-size: 1rem;
}

.welcome-slide-button:hover {
  background-color: #357abd; /* Slightly darker blue for hover effect */
}

/* Initially hide the questions form */
.hidden {
  display: none;
}

.question__form {
  width: 80%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-alternate);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  padding: 2rem;
  margin-top: 70px; /* Adjust for header height */
}

.question__list {
  --flow-spacer: 2em;
}

.question__box {
  background-color: var(--background);
  display: grid;
  padding: 2rem;
  grid-template-areas:
    "nm nm"
    "q1 nn"
    "q2 nn";
  justify-items: center;
  --flow-spacer: inherit;
  border: 2px solid #2c2c2c; /* Dark border to match the dark theme */
  border-radius: 8px;
}

.question__yes {
  grid-area: q1;
}

.question__no {
  grid-area: q2 ;
}

.question__title {
  grid-area: nm;
  max-width: 30ch;
  text-align: center;
  color: var(--footer-text-color); /* Light text color for contrast */
}

.question__submit {
  width: 10rem;
  border: none;
  padding: 0.5rem;
  border-radius: 1rem;
  margin-block: 1rem;
  background-color: #4a90e2; /* Calm blue button */
  color: #ffffff; /* White text for contrast */
  cursor: pointer;
}

.question__submit:hover {
  background-color: #357abd; /* Slightly darker blue for hover effect */
}