/* Mobile-first responsive design */
input {
  background-color: var(--color-white);
  width: 70%;
  color: var(--color-purple);
  border-radius: var(--border-radius);
  display: block;
  padding: 20px;
  border: 1px dashed var(--color-pink);
  margin: auto;
  margin-top: 4%;
  text-align: center;
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  box-sizing: border-box;
}

.question {
  color: black;
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.4rem; /* Smaller on mobile */
  line-height: 1.2;
  text-align: center;
  margin-bottom: 30px; /* Reduced margin for mobile */
  margin-top: 30px; /* Reduced margin for mobile */
  font-weight: 500;
  margin: 10px;
  cursor: default;
}

.promptdiv {
  background-color: var(--color-white);
  width: 90%; /* Wider on mobile */
  border-radius: var(--border-radius);
  display: block;
  margin: auto;
  padding: 15px; /* Reduced padding for mobile */
  margin-bottom: 10px;
  cursor: default;
}

.prompt {
  font-size: 0.75rem; /* Smaller font for mobile */
  font-family: "Cantarell", sans-serif;
  color: var(--color-lighterblack);
  font-weight: 700;
  padding-top: 2%;
  text-align: center;
  text-transform: uppercase;
}

/* Space */

/* Tablet styles */
@media (min-width: 768px) {
  .promptdiv {
    width: 70%;
    padding: 16px;
  }
}

.prompt {
  font-size: 0.8rem;
}

/* Space */

/* Desktop styles */
@media (min-width: 1024px) {
  .promptdiv {
    width: 50%;
    padding: 20px;
  }

  .prompt {
    font-size: 0.8rem;
    padding-top: 1%;
    padding-bottom: 2%;
  }

  input {
    min-width: 100%;
    font-size: 1.2rem;
  }

  .question {
    font-size: 2rem;
    margin-bottom: 60px;
    margin-top: 60px;
  }
}