/* Стиль для блоков кода (объединенный и улучшенный) */
        pre {
            background-color: #282c34; /* Темный фон для блока кода */
            color: #abb2bf; /* Светлый текст */
            padding: 1em;
            border-radius: 8px;
            overflow-x: auto; /* Позволяет прокручивать горизонтально, если строка очень длинная */
            font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace; /* Моноширинный шрифт */
            font-size: 0.9em;
            line-height: 1.4;
            margin: 1.5em 0; /* Отступы сверху и снизу */
        }

        pre code {
            display: block; /* Важно для сохранения переносов строк внутри преформатированного текста */
            padding: 0;
            background: none;
            color: inherit;
        }

        /* Стили для инлайн-кода */
        code {
            background-color: #f0f0f0;
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
            font-size: 0.85em;
            color: #c7254e;
        }


pre code {
    /* Стили для <code> внутри <pre> */
    display: block; /* Важно для сохранения переносов строк внутри преформатированного текста */
    padding: 0; /* Убираем внутренний отступ, так как он уже есть у pre */
    background: none; /* Убираем фон, если он был задан для инлайн-кода */
    color: inherit; /* Наследуем цвет текста от pre */
}

/* Стили для инлайн-кода (если вы используете <code> без <pre>) */
code {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.85em;
    color: #c7254e; /* Чуть другой цвет для выделения */
}



 #glossary-content {
    max-height: 400px; /* Установите желаемую максимальную высоту.
                       Можно поиграться с этим значением: 300px, 500px и т.д. */
    overflow-y: auto; /* Включает вертикальную прокрутку, если контент выходит за max-height */
    overflow-x: hidden; /* Скрывает горизонтальную прокрутку, если она появится */
    padding-right: 15px; /* Небольшой отступ справа, чтобы текст не прилипал к ползунку */
    margin-bottom: 20px; /* Отступ снизу, чтобы отделить от "Есть вопросы?" */
    border: 1px solid #e0e0e0; /* Небольшая рамка для эффекта "окна" */
    border-radius: 5px; /* Слегка закругленные углы */
    padding: 10px; /* Внутренние отступы */
    background-color: #f8f8f8; /* Легкий фон, чтобы выделить блок */
}

/* Возможно, также стоит немного стилизовать сами термины/определения для лучшей читаемости */
#glossary-content dt {
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

#glossary-content dd {
    margin-left: 0; /* Убираем стандартный отступ, если хотите, чтобы определение начиналось сразу под термином */
    margin-bottom: 5px;
    color: #555;
}

     h2::first-letter { /* Стили для первой буквы параграфа */
      font-size: 2em;
      color: #0000FF;
    }


        /* --- НОВЫЕ СТИЛИ ДЛЯ ЗАГОЛОВКА --- */

        .main-header {
            position: relative; /* Для позиционирования псевдоэлемента-оверлея */
            width: 100%;

            background-color: #222; /* Дефолтный темный фон на случай, если картинка не загрузится */
            color: #fff; /* Дефолтный цвет текста */
            text-align: center; /* Центрируем текст по горизонтали внутри header-content */
            overflow: hidden; /* Обрезаем все, что выходит за рамки хедера (например, большие фоновые изображения) */
            background-size: cover; /* Фоновое изображение будет покрывать всю область */
            background-position: center; /* Центрируем фоновое изображение */
            background-repeat: no-repeat; /* Запрещаем повторение фонового изображения */
        }

        /* Фоновое изображение для Python */
        .main-header.python-theme {
            background-image: url('https://images.unsplash.com/photo-1510511459019-5da409733dc7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* Замените на свое */
        }

        /* Фоновое изображение для PHP (покажем позже, как переключать) */
        .main-header.php-theme {
            background-image: url('https://images.unsplash.com/photo-1582294451737-295304193b22?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* Замените на свое */
        }


        /* Оверлей для затемнения фонового изображения и улучшения читаемости текста */
        .main-header::before {
            content: '';
            position: sticky; top: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Черный полупрозрачный слой */
            z-index: 1;

        }

        .header-content {
            position: relative; /* Чтобы быть над оверлеем */
            z-index: 2; /* Выше, чем оверлей */
            max-width: 1200px; /* Ограничиваем ширину содержимого */
            margin: 0 auto; /* Центрируем содержимое по горизонтали */
            padding: 0 20px; /* Отступы по бокам */
            display: flex; /* Используем Flexbox для выравнивания иконки и текста */
            align-items: center; /* Выравниваем элементы по центру по вертикали */
            justify-content: center; /* Центрируем элементы по горизонтали (если их мало) */
            flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку при уменьшении экрана */
        }

        .language-icon {
            width: 80px; /* Размер иконки */
            height: 80px;
            margin-right: 25px; /* Отступ справа от иконки */
            flex-shrink: 0; /* Не сжимать иконку */
        }

        .header-text-container {
            text-align: left; /* Текст внутри контейнера будет выровнен по левому краю */
            flex-grow: 1; /* Позволяем контейнеру с текстом занять все доступное пространство */
            max-width: calc(100% - 105px); /* Учитываем ширину иконки и margin-right */
        }

        .main-title {
            font-family: 'Arial', sans-serif; /* Или любой другой шрифт */
            font-size: 2.8em; /* Крупный размер для основного заголовка */
            font-weight: bold;
            color: #ffffff; /* Белый цвет */
            margin: 0 0 10px 0; /* Убираем стандартные отступы и добавляем свой нижний */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Тень для текста для лучшей читаемости */
        }

        .subtitle {
            font-family: 'Verdana', sans-serif; /* Или другой шрифт */
            font-size: 1.1em;
            color: #e0e0e0; /* Светло-серый */
            margin: 0; /* Убираем стандартные отступы */
            line-height: 1.4;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Тень для подзаголовка */
        }

        /* --- Адаптивность для мобильных устройств --- */
        @media (max-width: 768px) {
            .main-header {
                padding: 0 0 40px 0;
            }

            .header-content {
                flex-direction: column; /* На маленьких экранах иконка и текст располагаются друг под другом */
                padding: 0 15px;
            }

            .language-icon {
                width: 60px; /* Уменьшаем размер иконки */