/* Добавляем эти стили в ваш CSS файл (например, style.css) */
body {
    height: 2400px; /* Задаем высоту для отображения */
    margin: 0;
    padding: 0;;
    background-color: #A5CCE9;
}

#background {
    left: 0px;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-image: url("../images/layer_1.png");
    position: relative; /* Изменено на relative */
    align-items: center; /* Центрирование содержимого */
}

header {
    background-color: #f8f9fa; /* Цвет фона для заголовка */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#layer_1 {
    left: 12%;
    bottom: 200px;
    top: 55px;
    width: 95%;
    height: 70%;
    background-image: url(../images/факел_окно.png) ;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    display: inline-block;
}

.nav {
    top: 21%;
    left: 28%;
    width: 90%; /* адаптивная ширина */
    max-width: 100px; /* ограничение максимальной ширины */
    margin: 2rem auto; /* центрирование по горизонтали */
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(80, 57, 221, 0.25) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.75rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative; /* можно оставить, если нужно смещение */
}

.navbar-nav {
    list-style: none; /* убираем маркеры списка */
    display: flex; /* включаем Flexbox */
    justify-content: center; /* центрируем элементы */
    gap: 0.75rem; /* равномерные зазоры между пунктами */
    padding: 0; /* сбрасываем стандартные отступы ul */
    margin: 0; /* сбрасываем margin */
}

.nav-item {
    padding: 0.5rem 1rem; /* адаптивные внутренние отступы */
    margin: 0; /* отключаем margin — зазоры через gap */
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    opacity: 0.8; /* лёгкий эффект при наведении */
}

#h2_list {
    top: 22%;
    left: 42%;
    position: relative;
}

#layer_5 {
    left: 20px;
    top: 73%;
    padding-top: 100px;
    margin-left: auto;
    position: absolute;
    z-index:1;
}




 .image-container {
     display: flex; /* Используем Flexbox для расположения изображений */
     flex-direction: row; /* Изображения друг под другом */
     align-items: center; /* Центрируем по горизонтали */
     margin-bottom: 10px; /* Отступ снизу */
     border: 1px solid #eee; /* Легкая рамка */
     padding: 5px;
     border-radius: 5px;
 }
.image-container img {
    max-width: 150px; /* Ограничиваем ширину миниатюры */
    height: auto; /* Сохраняем пропорции */
    margin-bottom: 5px; /* Отступ между изображениями */
    border: 1px solid #ccc; /* Рамка для каждого изображения */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Легкая тень */
}
/* Если у вас по два изображения на заметку, и вы хотите их в строку: */
.image-row {
    display: flex;
    justify-content: space-around; /* Распределяем места */
    flex-wrap: wrap; /* Перенос на новую строку, если не помещаются */
}
.image-cell {
    text-align: center;
    margin: 5px;
    flex: 1; /* Равномерное распределение места */
    min-width: 120px; /* Минимальная ширина для ячейки */
}
.image-cell img {
    max-width: 100%; /* Адаптивная ширина */
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.container {
    max-width: 2400px; /* Ограничиваем ширину контейнера, чтобы сетка работала лучше */
}
.table {
    width: 100%; /* Таблица занимает всю доступную ширину */
}

.table td {
    vertical-align: middle; /* Центрирование по вертикали */
}

#layer_5 {
    padding: 20px;
}

/* Медиа-запросы для адаптации под размер 1080x2400 */
@media (max-width: 1080px) {
    #layer_5 {
        padding: 10px;
    }

    h2 {
        font-size: 24px; /* Уменьшаем размер заголовка */
    }

    .table {
        font-size: 14px; /* Уменьшаем размер шрифта таблицы */
    }
}

@media (min-width: 1081px) {
    h2 {
        font-size: 32px; /* Увеличиваем размер заголовка для больших экранов */
    }

    .table {
        font-size: 16px; /* Увеличиваем размер шрифта таблицы */
    }
}