---

/* ========== ГЛОБАЛЬНЫЕ СТИЛИ (для всей страницы) ========== */

/* Сброс стандартных отступов у всех элементов */
* {
    margin: 0;          /* Убираем внешние отступы у всех тегов */
    padding: 0;         /* Убираем внутренние отступы у всех тегов */
    box-sizing: border-box;  /* Ширина = контент + padding + border (удобно для вёрстки) */
}

/* Стили для всего тела страницы */
body {
    font-family: Arial, Helvetica, sans-serif;  /* Шрифт с запасными вариантами */
    line-height: 1.6;   /* Межстрочный интервал 1.6 (читаемость) */
    color: #333;        /* Тёмно-серый цвет текста по умолчанию */
}

/* ========== СТИЛИ ДЛЯ ШАПКИ (header) ========== */

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* Градиент от синего к фиолетовому */
    color: white;
    padding: 30px 20px;  /* Верх/низ 30px, лево/право 20px */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Тень под шапкой: смещение вниз, размытие, прозрачность */
    margin-bottom: 20px;  /* Отступ снизу от шапки */
}

/* Заголовок внутри шапки */
header h1 {
    font-size: 2.5rem;    /* Размер шрифта: 2.5 от базового (крупный) */
    letter-spacing: 2px;  /* Расстояние между буквами */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);  /* Тень у текста */
}

/* Меню навигации внутри шапки */
header nav {
    margin-top: 15px;  /* Отступ сверху от меню */
}

/* Стили для ссылок в меню */
header nav a {
    color: white;
    text-decoration: none;  /* Убираем подчёркивание у ссылок */
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 25px;    /* Скруглённые углы (как у кнопок) */
    background-color: rgba(255, 255, 255, 0.2);  /* Полупрозрачный белый фон */
    transition: all 0.3s ease;  /* Плавный переход при наведении */
}

/* Эффект при наведении на ссылки меню */
header nav a:hover {
    background-color: rgba(255, 255, 255, 0.4);  /* Делаем фон светлее */
    transform: scale(1.05);  /* Увеличиваем кнопку на 5% */
}

/* ========== СТИЛИ ДЛЯ ОСНОВНОГО БЛОКА (main) ========== */

main {
    max-width: 1100px;  /* Максимальная ширина контента (чтобы не растягивался) */
    margin: 0 auto;     /* Выравнивание по центру (автоматические отступы) */
    padding: 20px;
    min-height: 500px;
    background-color: #f8f9fa;
    border-radius: 12px;  /* Скруглённые углы у основного блока */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);  /* Лёгкая тень */
}

/* Заголовки внутри main */
main h2 {
    color: #667eea;  /* Синий цвет (как в градиенте шапки) */
    font-size: 2rem;
    margin-bottom: 15px;
    border-bottom: 3px solid #667eea;  /* Подчёркивание снизу */
    padding-bottom: 10px;
}

/* Абзацы внутри main */
main p {
    font-size: 1.1rem;  /* Чуть крупнее обычного */
    margin-bottom: 15px;  /* Отступ снизу между абзацами */
    color: #555;  /* Серый цвет текста */
}

/* Карточки (блоки с контентом) */
.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    border-left: 4px solid #764ba2;  /* Цветная полоска слева */
}

/* Стили для кнопки */
.btn {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;  /* Курсор в виде руки */
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;  /* Плавное изменение */
}

/* Эффект при наведении на кнопку */
.btn:hover {
    transform: translateY(-3px);  /* Поднимаем кнопку вверх */
    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);  /* Усиленная тень */
}

/* ========== СТИЛИ ДЛЯ ПОДВАЛА (footer) ========== */

footer {
    background: #2d2d2d;  /* Тёмный фон */
    color: #aaa;  /* Светло-серый текст (не белый) */
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;  /* Отступ сверху от подвала */
    border-top: 4px solid #667eea;  /* Цветная полоска сверху */
}

/* Ссылки в подвале */
footer a {
    color: #667eea;  /* Синие ссылки */
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;  /* Подчёркивание при наведении */
}

/* Текст в подвале */
footer p {
    margin-bottom: 10px;
}