/* Сброс стандартных стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Глобальные стили */
body {
    font-family: 'Times New Roman', sans-serif; /* Выбор шрифта */
    line-height: 1.6; /* Интерлиньяж для лучшей читаемости */
    background-color: #f5f5f5; /* Фоновый цвет страницы */
    color: #000000; /* Цвет текста */
    font-size: 24px; /* Размер шрифта, чуть больше по умолчанию */
}

/* Стили для заголовков */
h1, h2, h3 {
    margin-bottom: 10px;
    font-weight: bold;
}

/* Стили для контейнера */
.container {
    width: 80%;
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: auto; /* Центрирование */
    padding: 20px; /* Поля внутри контейнера */
    background-color: #ffffff; /* Фоновый цвет контейнера */
    border-radius: 8px; /* Округление углов */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для контейнера */
}



/* Стили для кнопок */
button {
    background-color: #007bff; /* Цвет фона кнопки */
    color: #fff; /* Цвет текста на кнопке */
    border: none; /* Убираем границы */
    border-radius: 10px; /* Округление углов */
    padding: 10px 20px; /* Внутренние отступы */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s; /* Плавное изменение цвета фона */
}

button:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
}

/* Стили для форм */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 100%; /* Полная ширина */
    padding: 10px; /* Внутренние отступы */
    margin: 10px 0; /* Отступы между полями */
    border: 1px solid #ccc; /* Цвет границы */
    border-radius: 5px; /* Округление углов */
}

/* Стили для ссылок */
a {
    color: #5f84a1; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
    color: #2b6da0; /* Цвет текста при наведении */
}


/* Стили для флотающих элементов */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
    
.widget {
    text-align: left; /*Выравнивает текст по левому краю*/
    padding-left: 15px; /*Добавляет отступ слева (можете изменить значение по своему усмотрению)*/
    margin-bottom: 10px; /*Отступ между элементами подвала*/
    font-size: 100%; /*Установка размера текста в % от размера родительского шрифта*/
}
    
.btn-primary {
    background-color: rgb(122, 170, 85); /*Цвет кнопки*/
    color: rgb(153, 45, 45); /*Цвет текста кнопки*/
    padding: 10px 20px;
    border-radius: 5px;
    border: none; /*Убирает границу кнопки*/
    cursor: pointer; /*Курсор при наведении*/
}
    
.btn-primary:hover {
    background-color: rgb(143, 206, 204); /*Цвет кнопки при наведении*/
}

.button_up {
    background-color: #5f84a1; /*Цвет кнопки*/
    color: #ffffff; /*Цвет текста кнопки*/
    padding: 10px 20px;
    border-radius: 5px;
    border: none; /*Убирает границу кнопки*/
    cursor: pointer; /*Курсор при наведении*/
}
    
.button_up:hover {
    background-color: #f5f5f5; /*Цвет кнопки при наведении*/
    color: #000000; /*Цвет текста кнопки при наведении*/
}

.footer {
    background-color: #310f00; /*Цвет фона подвала*/
    color: #fffef5; /*Цвет шрифта подвала*/
    padding: 20px 0; /*Отступы сверху и снизу*/
}

.footer-container {
    width: 100%; /*Ширина подвала на всю ширину страницы*/
    padding: 20px; /*Поля внутри подвала*/
    background-color: #310f00; /*Цвет фона подвала*/
    color: #fffef5; /*Цвет текста подвала*/
    border-radius: 0; /*Убираем округление углов, если не нужно*/
}


/*Далее специальные настройки и стили для страниц chapter*/
/*Далее специальные настройки и стили для страниц chapter*/
/*Далее специальные настройки и стили для страниц chapter*/

.ch-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    justify-content: space-between;
    width: 70%; /* Ширина контейнера 90% от ширины экрана */
    margin: 0 auto; /* Центрирует контейнер по горизонтали */
    
}

.ch-container-text {
    display: flex;
    flex-direction: column; /* Элементы располагаются в столбик */
    flex-wrap: wrap;
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    width: 70%; /* Ширина контейнера 90% от ширины экрана */
    margin: 0 auto; /* Центрирует контейнер по горизонтали */
    /* align-items: center; /* Центрирует содержимое по вертикали (при соблюдении высоты) */
    padding: 20px; /* Внутренний отступ */
    text-align: justify; /* Текст по ширине */
}

.ch-container-text h1 {
    text-align: center; /* Центрирует текст внутри каждого блока */
    width: 100%; /* Обеспечивает заполнение 100% ширины блока */
}

.ch-custom-text-1 {
    color: #2b6da0; /*Цвет текста для выделения*/
    font-weight: bold;
}

.ch-custom-text-2 {
    font-weight: bold;
}
    
.ch-block {
    /*border: 1px solid #ccc;
    border-radius: 8px;*/
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    padding: 20px;
    margin: 10px;
    flex: 1 1 calc(50% - 20px); /*Два в ряд*/
    display: flex; /* Используем flexbox для размещения элементов внутри */
    flex-direction: column; /* Располагаем элементы вертикально */
}

.ch-block-2 {
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    padding: 20px;
    margin: 20px;
    flex: 1 1 calc(50% - 40px); /*Два в ряд*/
    display: flex; /* Используем flexbox для размещения элементов внутри */
    flex-direction: column; /* Располагаем элементы вертикально */
    cursor: pointer; /*Изменяет курсор на руку*/
    color: #000000; /* Установите желаемый цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    text-align: justify; /* Текст по ширине */
}

.ch-block-2:hover {
    background-color: #5f84a1; /* Цвет блока при наведении */
    color: #ffffff; /* Установите желаемый цвет текста */
}

.ch-block-3 {
    /*border: 1px solid #ccc;
    border-radius: 8px;*/
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    padding: 20px;
    margin: 10px;
    flex: 1 1 calc(30% - 20px); /*Три в ряд*/
    display: flex; /* Используем flexbox для размещения элементов внутри */
    flex-direction: column; /* Располагаем элементы вертикально */
    cursor: pointer; /*Изменяет курсор на руку*/
    color: #000000; /* Установите желаемый цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
}

.ch-block-3:hover {
    background-color: #5f84a1; /* Цвет блока при наведении */
    color: #ffffff; /* Установите желаемый цвет текста */
}

.ch-block-4 {
    background-color: #ffffff; /*Фоновый цвет контейнера*/
    padding: 15px;
    margin: 2px;
    flex: 1 1 calc(20% - 2px); /*Четыре в ряд*/
    display: flex; /* Используем flexbox для размещения элементов внутри */
    flex-direction: column; /* Располагаем элементы вертикально */
    cursor: pointer; /*Изменяет курсор на руку*/
    color: #000000; /* Установите желаемый цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    text-align: justify; /* Текст по ширине */
}

.ch-block-4:hover {
    background-color: #5f84a1; /* Цвет блока при наведении */
    color: #ffffff; /* Установите желаемый цвет текста */
}

.horizontal-block {
    background-color: #ffffff; /* Фоновый цвет горизонтального блока */
    padding: 15px; /* Внутренний отступ */
    /*border: 1px solid #aa2626; /* Граница горизонтального блока */
    /*border-radius: 4px; /* Скругление углов */
    flex: 1; /* Растягиваем этот блок, чтобы занять доступное пространство */
    min-height: 50px; /* Минимальная высота горизонтального блока */
    margin-top: 10px; /* Отступ сверху для каждого горизонтального блока */
    cursor: pointer; /*Изменяет курсор на руку*/
    color: #000000; /* Установите желаемый цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
}

.horizontal-block:hover {
    background-color: #5f84a1; /* Цвет блока при наведении */
    color: #ffffff; /* Установите желаемый цвет текста при наведении*/
}

.ch-more-link {
    display: inline-block;
    margin-top: 10px;
}
    
.ch-btn {
    background-color: darkblue; /*Темный цвет*/
    color: white; /*Светлый цвет текста*/
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}
    
.ch-btn:hover {
    background-color: navy; /*Более светлый темный цвет при ховере*/
}
    
.ch-modal {
    display: none; /*Скрытый по умолчанию*/
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(249, 249, 249, 0.8);/*Полупрозрачный светлый фон*/
}
    
.ch-modal-content {
    background-color: rgba(249, 249, 249, 0.8); /*Полупрозрачный светлый фон*/
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px; /*Округление углов*/
    width: 80%;
    max-width: 800px;
}
    
.ch-close {
    color: #aaa;
    float: right;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer; /*Изменяет курсор на руку*/
    margin-top: -30px; /* Измените значение по необходимости */
}

.ch-details {
    padding: 15px; /*Внутренние отступы*/
    background-color: rgba(249, 249, 249, 0.8); /*Полупрозрачный светлый фон*/
    /*border: 1px solid #ccc; /*Легкая граница*/
    border-radius: 20px; /*Округление углов*/
    margin-bottom: 20px; /*Отступ снизу*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /*Тень*/
    text-align: justify;  /*Текст по ширине страницы*/
}

.ch-ul {
    display: block;
    list-style-type: none; /*Убирает маркеры*/
    padding-left: 0; /*Убирает отступ слева*/
    margin: 0; /*Убирает внешние отступы*/
    box-sizing: border-box;
    margin-block-start: 2em;
    margin-block-end: 2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.ch-li {
    list-style-type: none;
    margin: 10px 0; /*Внешний 10px сверху и снизу, 0px по бокам*/
    padding: 5px; /*Внутренний отступ в 5 пикселей со всех сторон*/
    text-align: left;
    /*font-size: 1,25rem; /*Размер шрифта базовый*/
    color: #000000; /*Цвет текста черный*/
}

.ch-a {
    color: #5f84a1; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

.ch-a:hover {
    text-decoration: none; /* Подчеркивание при наведении */
}

/*Далее специальные настройки и стили для страниц section, для размещения примеров упражнений*/
/*Далее специальные настройки и стили для страниц section, для размещения примеров упражнений*/
/*Далее специальные настройки и стили для страниц section, для размещения примеров упражнений*/

/* Основной стиль контейнера */
.se-container {
    display: flex;
    flex-wrap: wrap; /* Позволяет блокам переноситься на новую строку */
    /*justify-content: space-between; /* Распределяет блоки по контейнеру */
    justify-content: flex-start; /* Располагает блоки в начале строки */
    padding: 20px;
    background-color: #ffffff; /* Цвет фона */
    border: 1px solid #ddd; /* Рамка контейнера */
    border-radius: 8px; /* Скругленные углы */
    width: 80%; /* Ширина контейнера 90% от ширины экрана */
    margin: 0 auto; /* Центрирует контейнер по горизонтали */
}

/* Стили для блоков */
.se-block-1 {
    flex: 1 1 calc(100% - 20px); /* Настройка ширины блоков на 1 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #ffffff; /* Цвет фона блоков */
    border: 1px solid #ccc; /* Рамка блоков */
    border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
}
.se-block-2 {
    flex: 1 1 calc(50% - 20px); /* Настройка ширины блоков на 1 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #ffffff; /* Цвет фона блоков */
    border: 1px solid #ccc; /* Рамка блоков */
    border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
}
.se-block-3 {
    flex: 1 1 calc(33% - 20px); /* Настройка ширины блоков на 1 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #ffffff; /* Цвет фона блоков */
    border: 1px solid #ccc; /* Рамка блоков */
    border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
}
.se-block-5 {
    flex: 1 1 calc(20% - 20px); /* Настройка ширины блоков на 5 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #fff; /* Цвет фона блоков */
    border: 1px solid #ccc; /* Рамка блоков */
    border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
    cursor: pointer; /*Изменяет курсор на руку*/
}

.se-block-5:hover {
    background-color: #5f84a1; /* Цвет фона блока при наведении */
    color: #fff; /* Цвет текста */    
}

.se-block-1 video {
    width: 100%; /* Ширина видео на 100% от блока */
    height: auto; /* Высота будет пропорциональной */
}
.se-block-2 video {
    width: 100%; /* Ширина видео на 100% от блока */
    height: auto; /* Высота будет пропорциональной */
}
.se-block-3 video {
    width: 100%; /* Ширина видео на 100% от блока */
    height: auto; /* Высота будет пропорциональной */
}
.se-block-5 video {
    width: 100%; /* Ширина видео на 100% от блока */
    height: auto; /* Высота будет пропорциональной */
}

.se-block-5 img {
    width: 100%; /* или желаемый размер, например, 300px */
    height: auto; /* автоматически сохраняет пропорции */
}

.ch-details img {
    width: 100%; /* или желаемый размер, например, 300px */
    height: auto; /* автоматически сохраняет пропорции */
}

/* Кнопки для скачивания */
.se-button {
    display: inline-block; /* Отображение кнопки в строку */
    padding: 10px 15px; /* Отметим отступы кнопки */
    background-color: #5f84a1; /* Цвет кнопки */
    color: white; /* Цвет текста кнопки */
    text-align: center; /* Выравнивание текста по центру */
    border: none; /* Без рамки */
    border-radius: 8px; /* Скругленные углы */
    cursor: pointer; /* Курсор при наведении */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
}

.se-button:hover {
    background-color: #0056b3; /* Цвет кнопки при наведении */
}

.se-h2 {
    text-align: center;
}

.se-h2:hover {
    color: #5f84a1; /* Цвет текста при наведении */
    cursor: pointer; /* Курсор при наведении */
}

.p1-se {
    margin: 1px 0;  /* Измените отступы для абзацев */
    padding: 0;     /* Убедитесь, что внутренний отступ равен 0 */
    text-align: left;
    font-size: 80%; /*Установка размера текста в % от размера родительского шрифта*/
}