body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.bg-image {
  background-image: url('pants.webp');
  background-position: center center;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.centered-content {
  /* `position: relative` and `display: flow` allow vertical centering while also
  adapting to the width of the contents (in this case, it adapts to the with of
  the file upload form, not shifting the upload button into a new line) */
  position: relative;
  display: flow;
  /* top, left, and translate at 50% center the div */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Defining both h/w and max h/w is necessary because otherwise very tall
  images would scroll out of the viewport.
  It also means not tall images are not centered vertically, but I couldn't find
  a solution that centers vertically but doesn't cause tall images to overflow. */
  width: 80%;
  height: 60%;
  max-width: 80vw;
  max-height: 60vh;
  text-align: center;
}

.question-mark {
  /* This makes sure the question mark doesn't overflow on wide screens. */
  font-size: 50vh;
  color: #fff; /* Question mark color */
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: fadeInZoom 5s forwards; /* Adjust time as needed */
}

.rotate {
  animation: fadeInZoom 5s forwards, rotate 2s linear infinite;
}

.form-container {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container input {
  /* display, line-clamp, and max-width, along with the parent display: flex,
  justify-content: center, and align-items: center makes the input field
  centered and allows it to adapt to the width of the contents,
  forcing the text to do an ellipsis if it's too long, even without whitespaces  */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  max-width: 80%;
}

.form-container input,
.form-container button {
  white-space: nowrap;
}

.result-image {
  display: none;
  /* This ensures the image is centered and adapts to the width of the parent container */
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
}

.no-pants-text {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f63e8f;
  font-size: 3rem;
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
}

@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}