/* Center the GIF in the page */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fb; /* light neutral background */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  flex-direction: column; /* stack caption above container centrally */
}

#gif-caption {
  text-align: center;
  font-size: 2rem; /* larger caption */
  font-weight: 700;
  color: #111;
  margin: 24px 12px 8px 12px;
  max-width: 90vw;
  white-space: nowrap; /* ensure single line */
  overflow: hidden;
  text-overflow: ellipsis; /* truncate if too long */
}

#gif-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  flex-direction: column; /* stack caption above image */
  max-width: 95vw;
}

#random-gif {
  display: block;
  max-width: 90vw; /* leave some margin on small screens */
  max-height: 70vh; /* keep it within the viewport height */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Small tweak for very small viewports */
@media (max-width: 420px) {
  #gif-container {
    padding: 6px;
  }
  #gif-caption {
    font-size: 1.1rem;
    margin: 12px 8px 6px 8px;
    white-space: normal; /* allow wrapping on very small screens */
  }
}