body {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 1.6;
    background-color: #222; /* Темный фон для основного контента */
    color: #ddd; /* Цвет текста для темной темы */
    margin: 0;
}

/* Стили для верхнего блока с заголовком и меню */
header {
    background-color: #555; /* Темный фон для верхнего блока */
    color: #ddd;
    padding: 10px; /* Уменьшаем внутренний отступ */
    margin-bottom: 20px;
    display: flex; /* Добавлено для использования flexbox */
    justify-content: space-between; /* Распределение элементов по краям блока */
    align-items: center; /* Выравнивание элементов по вертикали */
}

/* Меню навигации */
header nav {
    margin-bottom: 10px;
}

header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Расположение пунктов меню в одну линию */
    justify-content: center; /* Выравнивание по центру */
}

header nav ul li {
    margin-right: 10px; /* Уменьшаем отступ между пунктами меню */
}

header nav ul li a {
    color: #ddd;
    text-decoration: none;
    padding: 8px; /* Уменьшаем внутренний отступ */
    transition: background-color 0.3s ease;
}

/* Подсветка при наведении для темной темы */
header nav ul li a:hover {
    background-color: #777;
}

/* Галерея миниатюр */
.gallery {
    display: flex; /* Расположение миниатюр в ряд */
    flex-wrap: wrap; /* Перенос миниатюр на новую строку при необходимости */
    justify-content: center; /* Выравнивание миниатюр по центру */
    gap: 10px; /* Отступ между миниатюрами */
    padding: 20px;
}

.gallery img {
    width: 150px; /* Ширина миниатюры */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery img:hover {
    transform: scale(1.1); /* Увеличение миниатюры при наведении */
}

/* Модальное окно для увеличенных изображений */
.modal {
    display: none; /* Скрытое модальное окно по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    z-index: 999;
    padding: 20px;
    align-items: flex-start; /* Выравнивание по верхнему краю */
    justify-content: flex-start; /* Выравнивание по левому краю */
}

.modal img {
    max-width: 90%; /* Максимальная ширина изображения в модальном окне */
    max-height: 90%; /* Максимальная высота изображения в модальном окне */