/* ============================================
   ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ (тег body)
   ============================================ */
body {
  font-family: system-ui, sans-serif;   /* Шрифт: системный по умолчанию (на Linux — что-то вроде Noto Sans). */
  max-width: 40em;                       /* Максимальная ширина колонки — 40em (~40 символов). Не растянется на весь экран. */
  margin: 2em auto;                      /* Отступ снаружи: 2em сверху/снизу, "auto" по бокам = центрирование. */
  padding: 0 1em;                        /* Отступ внутри по бокам по 1em, чтобы текст не прилипал к краю окна. */
  line-height: 1.6;                      /* Межстрочный интервал: 1.6 от размера шрифта. Читать легче. */
  color: #222;                           /* Цвет текста: почти чёрный (не чистый #000, чуть мягче). */
}

/* ============================================
   ЗАГОЛОВОК H1 (Chaos City)
   ============================================ */
h1 {
  background-color: #FFCC00;             /* Оранжевый фон заголовка. */
  padding: 0.3em 0.6em;                  /* Внутренние отступы: текст не прилипает к краям фона. */
  margin: 0 -0.6em 1em -0.6em;           /* Отрицательные отступы с боков — фон растягивается на всю ширину колонки. */
  text-align: center;                    /* Текст по центру фона. */
}

/* ============================================
   РАЗДЕЛИТЕЛЬНАЯ ЛИНИЯ <hr>
   ============================================ */
hr {
  border: none;                          /* Убираем рамку, которую браузер рисует по умолчанию. */
  border-top: 1px solid #ddd;            /* Вместо неё — тонкая серая линия сверху. */
  margin: 2em 0;                         /* Отступы сверху и снизу по 2em. */
}

/* ============================================
   КОПИРАЙТ (класс .copyright на теге <p>)
   ============================================ */
.copyright {
  text-align: center;                    /* Копирайт по центру. */
  /* Сюда можно добавить, например: color: #888; — сделать текст серым. */
}

/* ============================================
   ПРАВИЛО ДЛЯ МЕЛКОГО ТЕКСТА <small>
   ============================================ */
small {
  color: #888;                           /* Серый цвет — визуально отделяет от основного текста. */
}

/* ============================================
   КАРТИНКИ <img>
   ============================================ */
img {
  max-width: 100%;                       /* Картинка не вылезет за колонку, даже если исходник огромный. */
  height: auto;                          /* Пропорции сохранятся при сужении. */
  display: block;                        /* Картинка — отдельный блок, а не "буква" в строке. */
  margin: 1.5em auto;                    /* Отступы сверху/снизу 1.5em, по бокам auto = центрирование. */
}