/* ===== Общие базовые стили ===== */
* {
    margin: 0; /* Убираем внешние отступы у всех элементов */
    padding: 0; /* Убираем внутренние отступы у всех элементов */
    box-sizing: border-box; /* Размеры элементов учитывают padding и border */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Шрифт по умолчанию */
}

body {
    display: flex; /* Используем Flexbox для выравнивания содержимого */
    flex-direction: column; /* Элементы внутри body располагаются вертикально */
    min-height: 100vh; /* Минимальная высота body = высота экрана */
    background: linear-gradient(to bottom, #1a2935, #2e1a4f); /* Градиент фона сверху вниз */
    color: #ffffff; /* Цвет текста белый */
    text-align: center; /* Центрирование текста */
    justify-content: center; /* Вертикальное центрирование для Flex-контейнера */
    padding: 20px; /* Отступы вокруг содержимого */
}

main {
    flex: 1; /* Растягивается на доступное пространство */
    display: flex; /* Flexbox внутри main */
    flex-direction: column; /* Элементы располагаются вертикально */
    justify-content: center; /* Вертикальное центрирование контента */
}

h1 {
    font-size: 2em; /* Размер заголовка */
    margin-bottom: 20px; /* Отступ снизу */
    color: #e0e6f0; /* Светлый цвет текста заголовка */
}

p {
    font-size: 1.2em; /* Размер текста абзаца */
    line-height: 1.6; /* Высота строки для удобного чтения */
    max-width: 800px; /* Максимальная ширина текста */
    margin: 0 auto; /* Центрирование блока по горизонтали */
}

footer {
    margin-top: 40px; /* Отступ сверху футера */
    font-size: 0.9em; /* Размер текста футера */
    color: #b0b8c0; /* Цвет текста футера — светло-серый */
}

/* Контейнер с полупрозрачным фоном */
.container {
    background: rgba(70, 130, 180, 0.85); /* Полупрозрачный светло-синий фон */
    padding: 30px; /* Внутренние отступы контейнера */
    border-radius: 12px; /* Скругление углов контейнера */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Тень под контейнером */
}