/* 1️⃣  Make the page fill the viewport */
html,
body {
  height: 100%;
  margin: 0;
  /* remove default body margin */
  font-family: Arial, sans-serif;
}

/* 2️⃣  Stack the form on top, definition gets the rest */
.container {
  display: flex;
  flex-direction: column;
  max-height: 95%;
  /* full‑height column */
  margin: 2.5% auto 0;
  /* keep your 50 px top margin */
  max-width: 95%;
  text-align: center;
}

/* 3️⃣  Input + button lay out nicely */
#lookupForm {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#wordInput {
  width: 50%;
  padding: 10px;
  font-size: 2.5rem;
}

#lookupBtn {
  padding: 10px;
  font-size: 2rem;
}

/* 4️⃣  Definition area flexes to consume leftover space */
#definition {
  flex: 1 1 auto;
  /* ↓ grow to fill, but may shrink */
  min-height: 0;
  /* allow it to shrink */
  overflow-y: auto;
  /* scroll if still too tall */
  background: #f4f4f4;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 2rem;
}

/* 5️⃣  Any image inside definition … */
#definition img {
  /* never wider or taller than the definition box / viewport */
  max-width: 95%;
  max-height: 90%;

  /* but don’t upscale smaller images */
  width: auto;
  height: auto;

  display: block;
  /* no inline‑gap below */
  margin: 0 auto;
  /* optional: center horizontally */
  object-fit: contain;
  /* maintain aspect ratio when shrinking */
}