/* --- RESET / BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;          /* потрібно, щоб flex-контейнер розтягнувся на всю висоту */
  font-family: sans-serif;
  background: #d3bc5f;
}

/* --- ГОЛОВНИЙ КОНТЕЙНЕР --- */
.wrapper {
  display: flex;         /* увімкнути flex-модель */
  flex-direction: column;/* розташовуємо дочірні блоки вертикально */
  min-height: 100%;      /* щоб footer завжди був знизу, навіть якщо контенту мало */
}

/* --- ОСНОВНА ЧАСТИНА СТОРІНКИ --- */
main {
  flex: 1 0 auto;        /* займає весь вільний простір, штовхаючи footer донизу */
  display: flex;         /* другий flex-контейнер для центрування картинки */
  align-items: center;   /* вертикальне центрування */
  justify-content: center;/* горизонтальне центрування */
}

/* --- КАРТИНКА --- */
main img {
  max-width: 90%;        /* адаптивність: не вилазить за межі екрана */
  max-height: 90%;
}

/* --- ФУТЕР --- */
footer {
  flex: 0 0 5rem;        /* фіксована висота 2rem, не розтягується й не стискається */
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}