/* ===== ОСНОВНЫЕ СТИЛИ СТРАНИЦЫ ===== */
/* Задаем основные параметры для всей страницы */
body {
    font-family: Arial, sans-serif; /* Основной шрифт */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    color: #e3e9eb; /* Цвет текста */
    /* Фоновое изображение с фиксированным позиционированием */
    background: url('background.webp') no-repeat center center fixed;
    background-size: cover; /* Растягиваем фон на весь экран */
    min-height: 100vh; /* Минимальная высота - весь экран */
    display: flex; /* Используем flex-верстку */
    flex-direction: column; /* Располагаем элементы в колонку */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center; /* Центрируем по горизонтали */
    position: relative; /* Относительное позиционирование */
}

/* Затемнение и размытие фона (псевдоэлемент) */
body::before {
    content: ""; /* Обязательное свойство для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Прижимаем к верхнему краю */
    left: 0; /* Прижимаем к левому краю */
    right: 0; /* Прижимаем к правому краю */
    bottom: 0; /* Прижимаем к нижнему краю */
    background: rgba(0, 0, 1, 0.3); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона */
    z-index: -1; /* Отправляем под основной контент */
}

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.container {
    width: 100%; /* Ширина на весь экран */
    max-width: 800px; /* Максимальная ширина контента */
    padding: 20px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    transform: translateY(-40px); /* Сдвигаем вверх на 40px */
    flex: 1; /* Занимаем все доступное пространство */
    display: flex; /* Flex-контейнер */
    flex-direction: column; /* Элементы в колонку */
    justify-content: center; /* Центрируем по вертикали */
}

/* ===== ЗАГОЛОВОК ===== */
h1 {
    margin-bottom: 30px; /* Отступ снизу */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Тень текста */
	font-size: 28px; /* Уменьшаем размер */
}

/* ===== КНОПКИ ===== */
.buttons {
    display: flex; /* Flex-контейнер для кнопок */
    flex-direction: row; /* Располагаем кнопки в ряд */
    gap: 20px; /* Расстояние между кнопками */
    justify-content: center; /* Центрируем кнопки */
    align-items: center; /* Выравниваем по центру */
}

/* Стили для кнопок */
.button {
    display: inline-block; /* Строчно-блочный элемент */
    padding: 18px 28px; /* Внутренние отступы */
    background-color: #8698b4; /* Цвет фона */
    color: white; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    border-radius: 5px; /* Закругляем углы */
    font-weight: bold; /* Жирный текст */
    width: 200px; /* Фиксированная ширина */
    transition: all 0.3s ease; /* Плавные анимации */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень кнопки */
}

/* Эффекты при наведении на кнопку */
.button:hover {
    background-color: #a3b0c0; /* Изменяем цвет фона */
    transform: translateY(-2px); /* Сдвигаем кнопку вверх */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Увеличиваем тень */
}

/* ===== ФУТЕР (НИЖНЯЯ ЧАСТЬ СТРАНИЦЫ) ===== */
.site-footer {
    width: 100%; /* На всю ширину */
    padding: 15px 0; /* Отступы сверху и снизу */
    text-align: center; /* Текст по центру */
    background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный фон */
    backdrop-filter: blur(3px); /* Легкое размытие */
}

/* Контейнер содержимого футера */
.footer-content {
    max-width: 800px; /* Максимальная ширина */
    margin: 0 auto; /* Центрируем */
    padding: 0 20px; /* Отступы по бокам */
    font-size: 14px; /* Размер текста */
}

/* Параграфы в футере */
.footer-content p {
    margin: 5px 0; /* Отступы между строками */
}

/* Ссылки в футере */
.footer-content a {
    color: #e3e9eb; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s; /* Плавное изменение цвета */
}

/* Эффекты при наведении на ссылку */
.footer-content a:hover {
    color: #ffffff; /* Белый цвет при наведении */
    text-decoration: underline; /* Подчеркивание */
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ===== */
@media (max-width: 600px) {
    /* Корректируем основной контейнер */
    .container {
        padding: 15px; /* Уменьшаем отступы */
    }

    /* Заголовок */
    h1 {
        font-size: 24px; /* Уменьшаем размер */
        margin-bottom: 20px; /* Уменьшаем отступ */
    }

    /* Кнопки - меняем направление на вертикальное */
    .buttons {
        flex-direction: column; /* Кнопки в колонку */
        gap: 15px; /* Расстояние между кнопками */
    }

    /* Стили кнопок для мобильных */
    .button {
        width: 100%; /* На всю ширину */
        max-width: 250px; /* Но не более 250px */
        padding: 12px 20px; /* Корректируем отступы */
    }

    /* Футер для мобильных */
    .site-footer {
        padding: 10px 0; /* Уменьшаем отступы */
        font-size: 12px; /* Уменьшаем размер текста */
    }
}

/* ===== ЛОГОТИП ===== */
.logo-container {
    margin-bottom: 20px; /* Отступ снизу */
    text-align: center; /* Выравнивание по центру */
}

/* Стили для изображения логотипа */
.logo {
    max-height: 80px; /* Максимальная высота */
    max-width: 100%; /* Максимальная ширина */
    height: auto; /* Автоматическая высота */
    width: auto; /* Автоматическая ширина */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Тень логотипа */
}

/* Адаптация логотипа для мобильных */
@media (max-width: 600px) {
    .logo {
        max-height: 60px; /* Уменьшаем высоту лого */
    }
}