/* Настройки для всего тела страницы (задний фон, шрифты, базовые отступы) */
body {
  background-color: #f9f0e6; /* Запасной цвет фона (сработает, если картинка не загрузится) */
  background-image: url("png/bg.GIF"); /* Путь к фоновой картинке в папке png (используем латиницу!) */
  background-repeat: repeat; /* Повторять фоновую картинку плиткой по горизонтали и вертикали */
  color: #999; /* Основной цвет текста на сайте (тёмно-серый) */
  font-family: Arial, sans-serif; /* Основной шрифт сайта (Arial, а если его нет — любой без засечек) */
  margin: 0; /* Убираем внешние отступы безопасности вокруг всей страницы */
  padding: 0; /* Убираем внутренние отступы внутри тела страницы */
}



.text-red { color: #ff5555; } /* Красный цвет */
.text-green { color: #55aa55; } /* Зеленый цвет */
.text-pink { color: #ff79c6; } /* Розовый цвет */


/* Шапка сайта, где располагаются заголовок и навигация */
header {
  padding-top: 40px; /* Внутренний отступ сверху, чтобы заголовок не прилипал к верхнему краю */
  text-align: center; /* Выравнивание текста и элементов внутри шапки по центру */
}

/* Главный заголовок сайта (h1) */
h1 {
  font-size: 80px; /* Размер шрифта заголовка */
  margin-bottom: 0px; /* Внешний отступ снизу (расстояние от заголовка до кнопок) */
  margin-top: 0; /* Убираем внешний отступ сверху */
}
/* Главный заголовок сайта (h1) */
h2 {
  font-size: 50px; /* Размер шрифта заголовка */
  margin-bottom: 0px; /* Внешний отступ снизу (расстояние от заголовка до кнопок) */
  margin-top: 0; /* Убираем внешний отступ сверху */
}
/* Главный заголовок сайта (h1) */
h3 {
  font-size: 30px; /* Размер шрифта заголовка */
  margin-bottom: 0px; /* Внешний отступ снизу (расстояние от заголовка до кнопок) */
  margin-top: 0; /* Убираем внешний отступ сверху */
}


/* Контейнер для навигационных кнопок (шапка с закладками) */
nav {
  display: flex; /* Включает гибкий режим Flexbox для удобного выравнивания кнопок */
  justify-content: center; /* Выравнивает кнопки ровно по центру горизонтали */
  flex-wrap: wrap; /* Разрешает переносу кнопок на новую строку, если экран телефона узкий */
  gap: 10px; /* Расстояние (щель) между соседними кнопками в 10 пикселей */
  padding: 10px; /* Внутренние отступы вокруг блока навигации */
}

/* Внешний вид самих ссылок-кнопок внутри навигации */
nav a {
  display: inline-block; /* Позволяет кнопке иметь четко заданные размеры и отступы */
  padding: 10px 20px; /* Внутренние отступы: 10px сверху/снизу и 20px справа/слева */
  background-color: #222222; /* Цвет фона самой кнопки (почти черный) */
  color: white; /* Цвет текста внутри кнопки (белый) */
  text-decoration: none; /* Убирает стандартное подчеркивание у ссылки */
  font-size: 16px; /* Размер шрифта текста на кнопке */
  border-radius: 6px 6px 0 0; /* Закругляет углы: верхний-левый и верхний-правый (стиль закладки) */
}

/* Состояние кнопки при наведении на нее курсора мыши */
nav a:hover {
  background-color: #0000ff; /* Меняет цвет фона кнопки на более светлый серый при наведении */
}

/* Основной белый блок с содержимым страницы */
main {
  max-width: 800px; /* Максимальная ширина блока (блок не растянется шире 800px) */
  margin: 20px auto; /* Отступ 20px сверху/снизу и "auto" по бокам (центрирует весь блок на экране) */
  padding: 20px; /* Внутреннее пространство (отступ от текста до края белого блока) */
  background-color: #ffffff; /* Цвет фона основного блока (чисто белый) */
  border-radius: 8px; /* Закругление всех 4-х углов белого блока на 8 пикселей */
  text-align: center; /* Выравнивание всего текста и элементов внутри этого блока по центру */
}

/* Специальный класс для оформления картинок внутри блока main */
.content-img {
  max-width: 100%; /* Картинка не сможет вылезти за пределы ширины родительского блока */
  height: auto; /* Высота подстраивается автоматически, сохраняя пропорции картинки */
  margin-top: 15px; /* Внешний отступ сверху, чтобы картинка не прилипала к тексту */
}

/* 1. Класс для длинных версий/комиксов/вертикальных рисунков */
.tall-img {
  max-width: 100%;    /* Картинка никогда не будет шире белого блока main */
  max-height: 500px;  /* Ограничиваем максимальную высоту (подберите нужное число в px) */
  object-fit: contain; /* Сохраняет пропорции без сжатия или сплющивания */
  height: auto;        /* Автоматическая высота */
  display: block;      /* Делает картинку отдельным блоком */
  margin: 15px auto;   /* Выравнивает картинку ровно по центру */
}

/* 2. Класс для прокручиваемой длинной картинки (если хотите смотреть ее во всю длину) */
.scroll-img {
  max-width: 100%;
  max-height: 400px;   /* Высота видимой области */
  overflow-y: auto;    /* Добавляет полосу прокрутки внутри блока, если картинка длинная */
  border: 1px solid #ddd;
}


/* ОБЩАЯ СЕТКА: Задает пропорции 3 колонок */
.layout-grid {
  display: grid;
  /* Задаем ширину колонок: Левая (250px), Центр (1fr - забирает всё свободное место), Правая (280px) */
  grid-template-columns: 1fr 3fr 1fr; 
  gap: 30px; /* Отступ (щель) между всеми блоками */
  max-width: 1300px; /* Общая максимальная ширина всей сетки */
  margin: 20px auto; /* Центрирование всей сетки на экране */
  padding: 0 15px;
}

/* ЛЕВАЯ КОЛОНКА */
.sidebar-left {
  background-color: #ffffff; /* Цвет фона левого блока */
  padding: 10px;
  border-radius: 12px; /* Закругление углов */
}

/* ЦЕНТРАЛЬНЫЙ БЛОК */
.main-content {
  background-color: #ffffff; /* Цвет фона центрального блока */
  padding: 10px;
  border-radius: 12px;
  margin: 0; /* Сбрасываем старый margin от базового main */
}

/* ПРАВАЯ КОЛОНКА (Контейнер под 3 карточки) */
.sidebar-right {
  display: flex;
  flex-direction: column; /* Размещает карточки друг под другом */
  gap: 20px; /* Расстояние между карточками справа */
}

/* ОБЩИЙ СТИЛЬ ДЛЯ ПРАВЫХ КАРТОЧЕК */
.card {
  background-color: #ffffff; /* Цвет фона карточек */
  padding: 15px;
  border-radius: 12px;
}