* {
	margin: 0; /* Удаление внешнего отступа у всех элементов */
	padding: 0; /* Удаление внутреннего отступа у всех элементов */
	box-sizing: border-box; /* Установка box-sizing, чтобы ширина и высота включали padding и border */
}

:root {
	--index: calc(1vw + 1vh); /* CSS-переменная для вычисления размера вьюпорта */
	--text: #e7e7e0; /* CSS-переменная для цвета текста */
	--transition: transform .75s cubic-bezier(.075, .5, 0, 1); /* CSS-переменная для настройки перехода */
}

@font-face {
	font-family: raleway_f; /* Определение шрифта с именем raleway_f */
	src: url(../fonts/raleway-regular.woff2); /* Путь к файлу шрифта (обычный) */
}

@font-face {
	font-family: raleway_f; /* Определение шрифта с именем raleway_f */
	src: url(../fonts/raleway-black.woff2); /* Путь к файлу шрифта (черный) */
	font-weight: 900; /* Установка веса шрифта (900 = черный) */
}

body {
	font-size: 14px;
	background-color: #010101; /* Установка фона страницы черного цвета */
	font-family: raleway_f, sans-serif; /* Установка шрифта для тела страницы */
	line-height: 1.55; /* Установка высоты строки */
}

.main-header {
    height: 100%; /* Высота заголовка равна высоте вьюпорта */
    position: relative;
    overflow: hidden; /* Скрытие любых выходящих элементов */
}

.main-header, .main-article {
    padding: 10px;
}

.main-header::after {
	content: ''; /* Создание псевдоэлемента после заголовка */
	position: absolute; /* Установка абсолютного позиционирования для псевдоэлемента */
	z-index: 100; /* Установка уровня наложения для псевдоэлемента */
	width: 100%; /* Ширина псевдоэлемента равна 100% */
	height: calc(var(--index) * 10); /* Высота псевдоэлемента в зависимости от CSS-переменной */
	background-image: url(../img/ground.png); /* Фоновое изображение для псевдоэлемента */
	background-size: cover; /* Настройка фона, чтобы он заполнял элемент */
	background-repeat: no-repeat; /* Запрет повторения фонового изображения */
	background-position: center; /* Центрирование фонового изображения */
	bottom: calc(var(--index) * -4.5); /* Позиционирование псевдоэлемента снизу */
}

.layers {
	height: 100vh; /* Высота слоя равна 100% высоты вьюпорта */
	display: flex; /* Установка flex-контейнера */
	align-items: center; /* Центрирование по вертикали */
	justify-content: center; /* Центрирование по горизонтали */
	text-align: center; /* Центрирование текста */
	overflow: hidden; /* Скрытие переполнения */
	position: relative; /* Установка относительного позиционирования для слоя */
}

.layer {
	height: 100%; /* Высота слоя равна 100% родительского контейнера */
	width: 100%; /* Ширина слоя равна 100% родительского контейнера */
	position: absolute; /* Установка абсолютного позиционирования для слоя */
	background-size: cover; /* Настройка фона, чтобы он заполнял элемент */
	background-position: center; /* Центрирование фонового изображения */
	will-change: transform; /* Подсказка браузеру, что будет изменяться трансформация */
	z-index: 2; /* Установка уровня наложения для слоя */
	transition: var(--transition); /* Применение перехода из переменной */
}

.layers__base {
    z-index: 0; /* Уровень наложения для базового слоя */
    transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0); /* Применение трансформации */
}

.layers__middle {
    z-index: 1; /* Средний уровень наложения */
    transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0); /* Применение трансформации для среднего слоя */

}

.layers__front {
    z-index: 2; /* Передний уровень наложения, но ниже видео */
    transform: translate3d(0, calc(var(--scrollTop) / 5.7), 0); /* Применение трансформации для переднего слоя */

}

.layer__header {
	z-index: 1; /* Уровень наложения для заголовка слоя */
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0); /* Применение трансформации для заголовка слоя */
	transition: var(--transition); /* Применение перехода из переменной */
	will-change: transform; /* Подсказка браузеру, что будет изменяться трансформация */
	text-transform: uppercase; /* Приведение текста к верхнему регистру */
	font-weight: 900; /* Установка веса шрифта (900 = черный) */
	color: var(--text); /* Установка цвета текста из CSS-переменной */
	text-shadow: 0 0 15px #9d822b; /* Добавление тени к тексту */
}

.layers__title {
	font-size: calc(var(--index) * 2.65); /* Установка размера шрифта для заголовка слоя */
	letter-spacing: calc(var(--index) / 2.25); /* Установка межбуквенного интервала */
}

.layers__caption {
	font-size: calc(var(--index) / 1.175); /* Установка размера шрифта для подзаголовка слоя */
	letter-spacing: calc(var(--index) / 3.5); /* Установка межбуквенного интервала для подзаголовка */
	margin-top: calc(var(--index) * -.75); /* Установка верхнего отступа для подзаголовка */
}

.main-article {
	--main-article-transform: translate3d(0, calc(var(--scrollTop) / -7.5), 0); /* Переменная для трансформации основной статьи */
	min-height: 100vh; /* Минимальная высота статьи равна 100% высоты вьюпорта */
	background-size: cover; /* Настройка фона, чтобы он заполнял элемент */
	background-position: center; /* Центрирование фонового изображения */
	color: var(--text); /* Установка цвета текста из CSS-переменной */
	display: flex; /* Установка flex-контейнера */
	justify-content: center; /* Центрирование по горизонтали */
	align-items: center; /* Центрирование по вертикали */
	position: relative; /* Установка относительного позиционирования для статьи */
	text-align: center; /* Центрирование текста */
	/* Update: */
	top: -1px; /* Сдвиг статьи на 1 пиксель вверх */
	z-index: 10; /* Уровень наложения для статьи */
}

.main-article__header {
    text-transform: uppercase;
    font-size: calc(var(--index) * 1.8);
    letter-spacing: calc(var(--index) / 7.5);
    text-align: center;
    margin: 20px auto; /* Добавляем отступы сверху и снизу */
    display: block;
}

.main-article__paragraph {
	max-width: calc(var(--index) * 30); /* Установка максимальной ширины для параграфа */
	font-size: calc(var(--index) * .9); /* Установка размера шрифта для параграфа */
	margin-top: calc(var(--index) / 1.25); /* Установка верхнего отступа для параграфа */
	transform: var(--main-article-transform); /* Применение трансформации из переменной */
	transition: var(--transition); /* Применение перехода из переменной */
	will-change: transform; /* Подсказка браузеру, что будет изменяться трансформация */
}

.content {
	will-change: transform; /* Подсказка браузеру, что будет изменяться трансформация для содержимого */
}

.copy {
	position: absolute; /* Установка абсолютного позиционирования для копирайта */
	bottom: calc(var(--index) * 2.5); /* Позиционирование копирайта снизу */
	opacity: .45; /* Установка прозрачности текста копирайта */
	font-size: calc(var(--index) * .75); /* Установка размера шрифта для копирайта */
	letter-spacing: calc(var(--index) / 37.5); /* Установка межбуквенного интервала для копирайта */
}

.glow {
    color: orange; /* Цвет текста */
    text-shadow: 0 0 5px rgb(0, 242, 255), 0 0 10px rgb(6, 243, 255); /* Эффект свечения */
}

table {
	border-collapse: collapse; /* Убираем двойные границы */
	width: 100%; /* Ширина таблицы */
}
td {
	padding: 10px; /* Отступы внутри ячеек */
	border: 1px solid #ccc; /* Граница ячеек */
}

.marker-list a {
	font-size: 12px;
    line-height: 1.5;
    text-align: left; /* Выравнивание текста по левому краю */
}

.container {
    display: flex; /* Устанавливаем контейнер как flex */
    flex-direction: column; /* Вертикальное направление */
    align-items: center; /* Центрируем содержимое по горизонтали */
    margin: 0 auto;
}

.sidebar {
    width: 30%; /* Список меток занимает 30% */
    text-align: left; /* Текст по левому краю */
    order: 1; /* Расположение списка перед картой */
}

#mapcont {
    width: 100%;
    height: 100%;
    background-color: #00000000; /* Прозрачный фон */
    border-radius: 10px; /* Закруглённые углы */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Тень для визуального улучшения */
}

.main-article__content {
    display: flex; /* Размещение бок о бок */
    justify-content: center; /* Центровка */
    align-items: center; /* Вертикальное выравнивание */
    gap: 20px; /* Расстояние между блоками */
}

.side-block {
    width: 20%; /* Ширина бокового блока */
    display: flex;
    justify-content: center; /* Центровка содержимого по горизонтали */
    align-items: center; /* Центровка содержимого по вертикали */
}

.side-block__image {
    max-width: 100%; /* Ограничение ширины изображения */
    height: auto; /* Сохранение пропорций */
    border-radius: 10px; /* Округлённые углы */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Добавление тени */
}

.map-container {
    width: 70%; /* Карта занимает 70% */
    height: 50%; /* Высота карты */
    order: 2; /* Расположение карты после списка */
}

.flex-content {
    display: flex; /* Горизонтальный flex-контейнер */
    justify-content: space-between; /* Равномерное распределение */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    width: 90%; /* Общая ширина контейнера */
    margin: 0 auto; /* Центрирование */
    gap: 2vh; /* Отступ между блоками */
    margin-bottom: 15vh;
    border: 1px solid #02020200;
}

.flex1-content {
    display: flex; /* Горизонтальный flex-контейнер */
    justify-content: space-between; /* Равномерное распределение */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    width: 90%; /* Общая ширина контейнера */
    margin: 0 auto; /* Центрирование */
    gap: 1vh; /* Отступ между блоками */
    margin-bottom: 15vh;
    text-align: left;
    border: 1px solid #0000000e;
    font-size: 17px;
}

/* Под телефоны */
@media (max-width: 576px) {
    .map-container {
        width: 70%; /* Карта занимает всю ширину экрана */
        height: 50%; /* Уменьшенная высота карты для мобильных устройств */
        margin-bottom: 20px; /* Добавляем отступ снизу для удобства */
    }

    .sidebar {
        width: 30%; /* Боковое меню на всю ширину */
        order: 2; /* Меню располагается под картой */
        margin-top: 10px; /* Отступ сверху */
        font-size: 14px; /* Уменьшаем размер текста */
    }

    .marker-list a {
        font-size: 16px; /* Удобочитаемый размер текста для телефонов */
        line-height: 1.4; /* Увеличиваем высоту строки для удобства */
    }

    .main-header {
        padding: 5px; /* Сокращаем отступы заголовка */
    }

    .map-container #mapcont {
        height: 300px; /* Размер карты равен контейнеру */
    }

    .layers__middle {
        z-index: 1; /* Средний уровень наложения */
        transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0); /* Применение трансформации для среднего слоя */
        height: auto;
    }
    
    .layers__front {
        z-index: 2; /* Передний уровень наложения, но ниже видео */
        transform: translate3d(0, calc(var(--scrollTop) / 5.7), 0); /* Применение трансформации для переднего слоя */
        height: auto;
    }

    .flex1-content {
        font-size: 10px;
    }
}


/* Средние экраны (планшеты) */
@media (min-width: 768px) {
    .map-container {
		width: 80%;
        height: 400px;
    }

    .sidebar {
        width: 25%;
        order: 1; /* Снова перемещаем до карты */
    }

    .marker-list a {
        font-size: 18px;
    }
}

/* Большие экраны (настольные компьютеры) */
@media (min-width: 1200px) {
    .map-container {
        width: 70%;
        height: 650px;
    }

    .sidebar {
        width: 30%;
    }

    .marker-list a {
        font-size: 20px;
    }

    .flex1-content {
        font-size: 12px;
    }
}

/* Большие экраны (настольные компьютеры) */
@media (min-width: 1920px) {
    .map-container {
        width: 70%;
        height: 650px;
    }

    .sidebar {
        width: 30%;
    }

    .marker-list a {
        font-size: 20px;
    }
    .flex1-content {
        font-size: 16px;
    }
}