body{
    background-color: #cfc4db; /* светло- сиреневый */
}

.header {
    display: flex;
    align-items: center; /* Выравниваем элементы по вертикали */
    justify-content: center; /* Выравниваем элементы по горизонтали */
    text-align: center;
}

.header-link {
   position: absolute;
   top: 0;
   left: 0;
}


h1 {
    color: #6e1963; /* бордовый */
    margin-top: 1em;
    text-align: center;
}

.phrase {
    color:  #333333;
    border: 2px solid #8A2BE2; /* цвет фиолетовый и толщина рамки 2*/
    padding: 2px; /* отступ внутри поля ввода */
    width: 20em;
    margin-right: 10px;
}

.choice-subject {
    border: 2px solid #8A2BE2; /* цвет фиолетовый и толщина рамки 2*/
    padding: 2px; /* отступы внутри элемента */
    margin-right: 10px;
}

.choice-depart {
    border: 2px solid #8A2BE2; /* цвет фиолетовый и толщина рамки 2*/
    padding: 2px; /* отступы внутри элемента */
    margin-right: 10px;
}


.filter-menu {
  display: flex;
  justify-content: space-between;
  margin-right: 10px; /* Отступ справа между элементами */
}

 /* кнопки на материалы */
.btn {
    background-color: #b8da83; /* Фоновый цвет кнопки */
    border: 1px solid #6a0dad; /* Цвет границы кнопки */
    padding: 3px 3px; /* Отступы внутри кнопки */
    display: inline-block; /* Делаем кнопку блочным элементом */
    border-radius: 5px; /* Радиус границ */
    text-align: center; /* Выравнивание текста по центру */
    font-size: 14px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт */
    color: #800000; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание ссылки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Создаем тень */
}

.btn:hover {
    background-color: #fff7aa ; /* Новый цвет фона при наведении */
    border-color: #a3d271; /* Новый цвет границы при наведении */
}

.btn:active {
    background-color: #a3d271; /* Новый цвет фона при нажатии */
    border-color: #92c15d; /* Новый цвет границы при нажатии */
}

/* Сброс стилей для ссылок */
.btn,
.btn:visited,
.btn:hover,
.btn:active {
  text-decoration: none;
}
 /* кнопки на метериалы */

/* кнопки ссылки */
.btn-link {
    background-color: #ffdab9; /* Бледно оранжевый цвет кнопки */
    border: 1px solid #660099; /* Цвет границы кнопки */
    padding: 3px 3px; /* Отступы внутри кнопки */
    display: inline-block; /* Делаем кнопку блочным элементом */
    border-radius: 5px; /* Радиус границ */
    text-align: center; /* Выравнивание текста по центру */
    font-size: 14px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт */
    color: #8B4513; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание ссылки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Создаем тень */
}

.btn-link:hover {
    background-color: #ffefdb; /* Немного ярче оранжевый цвет при наведении */
    border-color: #ffa500; /* Яркий оранжевый цвет границы при наведении */
}

.btn-link:active {
    background-color: #ffa500; /* Оранжевый цвет фона при нажатии */
    border-color: #ee7600; /* Более темный оранжевый цвет границы при нажатии */
}

/* Сброс стилей для ссылок */
.btn-link,
.btn-link:visited,
.btn-link:hover,
.btn-link:active {
  text-decoration: none;
}
 /* кнопки ссылки */


/* пагинация */
/* Стили для основного контейнера пагинации */
.pagination {
    margin-top: 20px;
    text-align: center;
}

/* Стили для ссылок пагинации */
.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}

/* Стили для активной страницы */
.pagination .current {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    background-color: #6e1963;
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 3px;
}

/* Стили для ссылок пагинации при наведении */
.pagination a:hover {
    background-color: #ddd;
}
/* пагинация */


.container {
    width: 100%; /* Задаем ширину контейнера, чтобы он занимал всю доступную ширину экрана */
    display: flex; /* Используем flexbox для управления расположением элементов */
    justify-content: center; /* Центрируем контейнер по горизонтали */
    align-items: center; /* Центрируем контейнер по вертикали */
}

img {
    max-width: 30%; /* Задаем максимальную ширину изображения, чтобы оно не выходило за границы контейнера */
    height: auto; /* Автоматически подстраиваем высоту для сохранения пропорций */
}

.depart {
    font-weight: bold;
}

/* Стили для неупорядоченного списка */
ul {
    list-style-type: square; /* Маркеры в виде квадратов */
}

/* Стили для элементов списка */
li {
    color: #008000; /* Ярко зеленый цвет для текста */
}

.menu {
    width: 200px; /* Ширина блока меню */
    padding: 10px; /* Отступ внутри блока */
    background-color: #f0f0f0; /* Цвет фона блока светло- серый */
}

.content {
    flex-grow: 1; /* Растягиваем блок содержимого на всю доступную ширину */
    padding: 10px; /* Отступ внутри блока */
    background-color: #ffffff; /* Цвет фона блока белый*/
}

.filter-button {
    background-color: #FF6B6B; /* Задаем цвет фона кнопки */
    color: white; /* Задаем цвет текста */
    padding: 5px 5px; /* Задаем отступы вокруг текста */
    border: none; /* Убираем границу */
    border-radius: 5px; /* Закругляем углы */
    cursor: pointer; /* Устанавливаем указатель мыши при наведении */
    text-decoration: none; /* Убираем подчеркивание текста */
    font-size: 16px; /* Задаем размер шрифта */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Создаем тень */
    transition: background-color 0.3s ease; /* Добавляем плавный переход для цвета фона */
    display: inline-block; /* Делаем кнопку блочным элементом */
}

.filter-button:hover {
    background-color: #FFA07A; /* Изменяем цвет фона кнопки при наведении  */
}

.filter-signature {
    color: #FF6B6B; /* Устанавливаем оранжевый цвет текста */
    font-size: 18px; /* Увеличиваем размер текста */
    font-weight: bold; /* Делаем текст жирным */
}

table {
    border-collapse: collapse; /* Объединяем границы ячеек */
    width: 100%; /* Задаем ширину таблицы */
    background-color: #f0f0f0;
}

th, td {
    border: 2px solid black; /* Устанавливаем границу для ячеек */
    padding: 8px; /* Задаем отступы вокруг содержимого ячеек */
}

th {
    background-color: #b786c2; /* Задаем цвет фона заголовков */
    text-align: left; /* Выравниваем текст в заголовках по левому краю */
    color: #6e1963;
}

td:empty::before {
    content: '\00a0'; /* Устанавливаем неразрывный пробел в пустых ячейках */
}
*{
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/* для materials_pro.html */

.body-materials {
    background-color: #b786c2; /* Розовый фон */
}

.container-materials {
    display: flex;
    background-color: #cfc4db; /* Бледно-сиреневый фон */
    border-radius: 20px; /* Радиус закругления углов */
    padding: 20px; /* Отступ внутри блока */
    width: 65%; /* Ширина блока */
    margin: 0 auto; /* Центрирование по горизонтали */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Тень */
}

/* в container-materials 2 блока светло серого цвета - container-inf и container-content */
.container-inf, .container-content {
    width: calc(50% - 10px); /* Ширина контейнеров - половина ширины родительского контейнера (container-materials) - отступы */
    margin: 5px; /* Отступы между контейнерами */
    background-color: #f0f0f0; /* Бледносерый цвет фона */
    padding: 10px; /* Внутренние отступы */
    box-sizing: border-box; /* Размеры элемента включают границы и поля */
}

/* в container-materials надписи*/
.p-materials-section{
    color: #333; /* Темносерый цвет */
    font-size: 20px; /* Размер шрифта 20 пикселей */
    font-family: Arial, sans-serif; /* Название шрифта */
    font-weight: bold;
}
/* в container-materials информация про досвід*/
.p-materials-section-inf{
    color: #4b0082; /* Индиго */
    font-size: 20px; /* Размер шрифта 12 пикселей */
    font-family: Arial, sans-serif; /* Название шрифта */
}

.container-content table td, .container-materials table tr {
    border: 5px solid #cfc4db;
    width: 50%; /* Ячейки по 50% ширины контейнера */
}

.container-content table td:first-child {
    text-align: center; /* Выравниваем текст по центру */
}

.container-content table td:first-child img {
    max-width: 100%; /* Максимальная ширина изображения - 100% от ширины родительского элемента */
    height: auto; /* Соотношение сторон */
}

.warning {
    display: flex;
    justify-content: center; /* Выравнивание по горизонтали по центру */
    align-items: center; /* Выравнивание по вертикали по центру */
}
.warning p {
    color: #ffeb3b; /* Ярко желтый цвет текста */
    font-weight: bold; /* Жирный текст */
    font-size: 22px;
    text-align: center; /* Выравниваем текст по центру */
}

.warning1 {
    display: flex;
    justify-content: center; /* Выравнивание по горизонтали по центру */
    align-items: center; /* Выравнивание по вертикали по центру */
}
.warning1 p {
    color: #6e1963;
    font-weight: bold; /* Жирный текст */
    font-size: 30px;
    text-align: center; /* Выравниваем текст по центру */
}

#viewer {
    width: 100%;
    height: 500px;
}


/* Основной стиль для мобильных устройств (с шириной экрана 600px и меньше) */
@media screen and (max-width: 600px) {
    body {
        background-color: #cfc4db;
    }

    .header {
        flex-direction: column; /* Заголовок будет вертикальным */
        align-items: center;
    }

    .header-link {
        position: static; /* Убираем абсолютное позиционирование */
        margin-top: 10px;
    }

    h1 {
        font-size: 24px; /* Уменьшаем размер шрифта для мобильных устройств */
        margin: 0;
    }

    .phrase, .choice-subject, .choice-depart {
        width: 100%; /* Делаем элементы шириной 100% на мобильных */
        margin: 10px 0; /* Убираем правый отступ и добавляем вертикальные отступы */
    }

    .filter-menu {
        flex-direction: column; /* Изменяем расположение на вертикальное */
        margin-right: 0;
    }

    .btn, .btn-link {
        width: 100%; /* Кнопки занимают всю ширину */
        margin-bottom: 10px; /* Отступ между кнопками */
        font-size: 16px; /* Увеличиваем размер шрифта для удобства */
    }

    .pagination {
        flex-direction: column; /* Пагинация будет вертикальной */
    }

    .pagination a {
        padding: 10px;
        font-size: 16px; /* Увеличиваем размер шрифта для ссылок пагинации */
    }

    .container {
        flex-direction: column; /* Контейнер будет вертикальным на мобильных */
        width: 100%;
    }

    .menu {
        width: 100%;
        padding: 10px 0;
    }

    .content {
        width: 100%;
        padding: 10px;
    }

    .filter-button {
        width: 100%; /* Кнопка фильтра займет всю ширину */
        font-size: 18px;
        padding: 10px;
    }

    .container-materials {
        flex-direction: column; /* Меняем на вертикальную ориентацию */
        width: 100%;
        padding: 10px;
    }

    .container-inf, .container-content {
        width: 100%; /* Ширина контейнеров 100% */
        margin: 10px 0; /* Отступы между контейнерами */
    }

    .p-materials-section, .p-materials-section-inf {
        font-size: 18px; /* Уменьшаем размер шрифта */
    }

    .container-content table td {
        width: 100%; /* Ячейки таблицы будут по ширине 100% */
        text-align: left; /* Выравнивание текста в ячейках */
    }

    .warning p {
        font-size: 18px; /* Уменьшаем размер текста */
    }

    #viewer {
        height: auto; /* Высота будет авто, чтобы адаптировать под экран */
    }
}

/* Основной стиль для планшетов (с шириной экрана 601px - 900px) */
@media screen and (max-width: 900px) and (min-width: 601px) {
    .container-materials {
        width: 80%; /* Сужаем контейнер материалов на планшетах */
    }

    .container-inf, .container-content {
        width: 48%; /* Оставляем немного отступа между контейнерами */
    }

    .container-content table td {
        width: 50%;
    }

    .menu {
        width: 250px; /* Увеличиваем ширину меню для планшетов */
    }

    .btn, .btn-link {
        width: 48%; /* Кнопки будут на одной линии с небольшим отступом */
        margin-right: 4%;
    }

    .filter-menu {
        flex-wrap: wrap; /* Разрешаем оборачивание элементов */
    }

    h1 {
        font-size: 26px; /* Увеличиваем размер заголовка */
    }

    .pagination a {
        font-size: 18px; /* Увеличиваем размер шрифта для ссылок пагинации */
    }
}