@font-face {
    font-family: 'Home Video'; /* Определяем шрифт с именем 'Home Video' */
    src: url('HomeVideo-Regular.otf') format('opentype'); /* Указываем путь к файлу шрифта */
}

body {
    font-family: Arial, sans-serif; /* Устанавливаем шрифт для всего тела документа */
    margin: 0; /* Убираем отступы по умолчанию */
    padding: 0; /* Убираем внутренние отступы по умолчанию */
    background-color: #121212; /* Устанавливаем темный фон для страницы */
    color: #e0e0e0; /* Устанавливаем светлый цвет текста */
}

header {
    background-color: #1c1c1c; /* Устанавливаем темный фон для шапки */
    padding: 15px 20px; /* Устанавливаем отступы внутри шапки */
    margin: 15px; /* Устанавливаем внешние отступы для шапки */
    display: flex; /* Используем flexbox для расположения элементов */
    justify-content: space-between; /* Распределяем элементы по горизонтали с равными промежутками */
    align-items: center; /* Выравниваем элементы по вертикали по центру */
    flex-wrap: wrap; /* Позволяем элементам обтекать друг друга на маленьких экранах */
}

#fin {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для элемента с id 'fin' */
    color: #39a102; /* Устанавливаем зеленый цвет для текста */
}

h1 {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для заголовка h1 */
    color: #00ff00; /* Устанавливаем зеленый цвет для заголовка */
    margin: 0; /* Убираем отступы по умолчанию */
    font-size: 30px; /* Устанавливаем размер шрифта для заголовка */
    text-shadow:
        0 0 5px rgba(0, 255, 0, 0.5), /* Добавляем слабое зеленое свечение */
        0 0 10px rgba(0, 255, 0, 0.3); /* Добавляем более слабое свечение */
}

h2, h3 {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для заголовков h2 и h3 */
    color: #39a102; /* Устанавливаем зеленый цвет для заголовков */
}

a {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для ссылок в навигации */
    color: #39a102;
    text-decoration: none; /* Убираем подчеркивание у ссылок */
}

nav {
    margin-left: auto; /* Убираем отступ слева для навигации, чтобы она выравнивалась вправо */
}

nav a {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для ссылок в навигации */
    margin: 0 10px; /* Устанавливаем отступы между пунктами меню */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    color: #39a102; /* Устанавливаем темно-зеленый цвет для ссылок */
    font-size: 12px; /* Устанавливаем размер шрифта для ссылок */
}

nav a:hover {
    color: #00ff00; /* Устанавливаем зеленый цвет при наведении на ссылку */
    text-shadow:
        0 0 5px rgba(0, 255, 0, 0.5), /* Добавляем слабое зеленое свечение при наведении */
        0 0 10px rgba(0, 255, 0, 0.3); /* Добавляем более слабое свечение при наведении */
}

footer {
    background-color: #1c1c1c; /* Устанавливаем темный фон для подвала */
    text-align: center; /* Выравниваем текст по центру */
    padding: 10px; /* Устанавливаем отступы внутри подвала */
    position: relative; /* Устанавливаем относительное позиционирование для подвала */
    bottom: 0; /* Устанавливаем подвал внизу */
    width: 100%; /* Устанавливаем ширину подвала на 100% */
}

main {
    padding: 20px; /* Устанавливаем отступы внутри основного контента */
}

.code {
    color: #00ff00; /* Устанавливаем зеленый цвет для кода */
}

.comment {
    color: #cccccc; /* Устанавливаем серый цвет для комментариев */
}

.string {
    color: #ffcc00; /* Устанавливаем желтый цвет для строк */
}

.keyword {
    color: #ff007f; /* Устанавливаем розовый цвет для ключевых слов */
}

.main-title {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для основного заголовка */
    color: #39a102; /* Устанавливаем зеленый цвет для основного заголовка */
    font-size: 1.5em; /* Устанавливаем размер шрифта для основного заголовка */
    margin-bottom: 10px; /* Устанавливаем отступ снизу для основного заголовка */
}

.section-title {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для заголовка секции */
    color: #ffcc00; /* Устанавливаем желтый цвет для заголовка секции */
    font-size: 1.2em; /* Устанавливаем размер шрифта для заголовка секции */
    margin-top: 20px; /* Устанавливаем отступ сверху для заголовка секции */
    margin-bottom: 10px; /* Устанавливаем отступ снизу для заголовка секции */
}

.subsection-title {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для заголовка подсекции */
    color: #6e6e6e; /* Устанавливаем серый цвет для заголовка подсекции */
    font-size: 1.2em; /* Устанавливаем размер шрифта для заголовка подсекции */
    margin-top: 15px; /* Устанавливаем отступ сверху для заголовка подсекции */
    margin-bottom: 5px; /* Устанавливаем отступ снизу для заголовка подсекции */
}

pre {
    background-color: #000000; /* Устанавливаем черный фон для блока кода */
    border-left: 5px solid #2980b9; /* Устанавливаем левую границу с цветом */
    padding: 10px; /* Устанавливаем отступы внутри блока кода */
    overflow-x: auto; /* Позволяем горизонтальную прокрутку, если текст выходит за пределы */
}

/* Стили для выпадающего меню */
.dropdown {
    position: relative; /* Устанавливаем относительное позиционирование для выпадающего меню */
    display: inline-block; /* Отображаем элемент как блочный элемент в строке */
}

.dropbtn {
    font-family: 'Home Video', cursive; /* Устанавливаем шрифт для кнопки выпадающего меню */
    background-color: #39a102; /* Устанавливаем цвет фона для кнопки */
    color: #ffffff; /* Устанавливаем цвет текста для кнопки */
    padding: 16px; /* Устанавливаем отступы внутри кнопки */
    font-size: 16px; /* Устанавливаем размер шрифта для кнопки */
    border: none; /* Убираем границу у кнопки */
    cursor: pointer; /* Устанавливаем курсор в виде указателя при наведении */
}

.dropdown-content {
    display: none; /* Скрываем подменю по умолчанию */
    position: absolute; /* Устанавливаем абсолютное позиционирование для подменю */
    background-color: #003d04; /* Устанавливаем цвет фона для подменю */
    min-width: 160px; /* Устанавливаем минимальную ширину подменю */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Добавляем тень к подменю */
    z-index: 1; /* Устанавливаем уровень наложения для подменю */
}

.dropdown-content a {
    color: #ffcc00; /* Устанавливаем цвет текста для ссылок в подменю */
    padding: 12px 16px; /* Устанавливаем отступы внутри ссылок подменю */
    text-decoration: none; /* Убираем подчеркивание у ссылок в подменю */
    display: block; /* Отображаем ссылки как блочные элементы */
}

.dropdown-content a:hover {
    background-color: #1c1c1c; /* Устанавливаем цвет фона при наведении на ссылку в подменю */
}

.dropdown:hover .dropdown-content {
    display: block; /* Показываем подменю при наведении на родительский элемент */
}

.dropdown:hover .dropbtn {
    color: #ffcc00; /* Устанавливаем цвет текста кнопки при наведении */
    background-color: #3e8e41; /* Устанавливаем цвет фона кнопки при наведении */
}


.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.close {
    cursor: pointer;
    color: red;
    font-weight: bold;
}

/* Адаптивные стили */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Уменьшаем отступы на мобильных устройствах */
    }

    header {
        flex-direction: column; /* Переключаем на вертикальное расположение элементов в шапке */
        align-items: flex-start; /* Выравниваем элементы по левому краю */
    }

    nav {
        margin: 10px 0; /* Устанавливаем отступы для навигации */
    }

    nav a {
        font-size: 14px; /* Увеличиваем размер шрифта для ссылок на мобильных устройствах */
        margin: 5px 0; /* Увеличиваем отступы между пунктами меню */
    }

    .dropbtn {
        width: 100%; /* Кнопка занимает всю ширину на мобильных устройствах */
        padding: 12px; /* Уменьшаем отступы для кнопки */
    }

    .dropdown-content {
        position: static; /* Убираем абсолютное позиционирование для подменю на мобильных устройствах */
        width: 100%; /* Ширина подменю 100% на мобильных устройствах */
    }
}