* {
    box-sizing: border-box;
}

body {
    margin: auto;
    background: #FAFAD2;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.image-container {
    max-width: 700px;
    margin: 0 auto;
}


.row::after {
    content: "";
    clear: both;
    display: table; /* Более безопасное значение для clearfix */
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

html {
    font-family: 'Noto Serif', serif;
    font-size: 100%;
}

/* Упорядочим заголовки и исправим размеры */
h1, h2, h3, h4, h5, 
li, a, dt, dd, dl {
    font-family: 'Noto Serif', serif;
    color: #2F4F4F;
    margin-left: 15px;
}

p {
    font-family: 'Noto Serif', serif;
    color: #2F4F4F;
    margin: 5px 0; /* Упрощаем отступы */
    text-indent: 2em;
}

li {
    list-style-type: none;
}

ul, dl {
    margin-left: 0;
    padding-left: 0;
}

/* Упрощаем стилизацию ссылок */
a {
    color: #2F4F4F;
    font-style: italic;
    text-decoration: none;
}

a:hover {
    font-size: 150%;
    transition: font-size 0.2s; /* Плавное изменение */
}

/* Исправляем размеры (запятые на точки!) */
h1 { font-size: 3vw; }  
h2, h3 { font-size: 2.5vw; } /* Исправлено 2,5 -> 2.5 */
h4, h5 { font-size: 2vw; }

/* Рефакторинг меню */
.menu button {
    background: antiquewhite;
    padding: 0;
    border: none; /* Убираем стандартные границы */
    cursor: pointer;
    margin-right: 1px;
    transform: skewX(-10deg);
}

.menu button a {
    padding: 2px 5px;
    display: block;
    font-size: 0.846em;
    height: 48px;
    transform: skewX(10deg); /* Компенсируем skew кнопки */
}

.menu button a:hover {
    background: #F5DEB3;
}

.footer {
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

.checked {
    color: orange;
}

.GeneratedMarquee {
    font-family: 'Noto Serif', serif;
    font-size: 1.5rem; /* Лучше использовать rem для текста */
    font-style: italic;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    color: #00CC00;
    padding: 1.5em;
    margin: 2em 0; /* Упрощаем отступы */
}

/* Адаптивная сетка */
/* Мобильные (базовые стили) */
[class*="col-"] {
    width: 100%;
}

/* Планшеты */
@media only screen and (min-width: 600px) {
    .col-m-1 { width: 8.33%; }
    .col-m-2 { width: 16.66%; }
    .col-m-3 { width: 25%; }
    .col-m-4 { width: 33.33%; }
    .col-m-5 { width: 41.66%; }
    .col-m-6 { width: 50%; }
    .col-m-7 { width: 58.33%; }
    .col-m-8 { width: 66.66%; }
    .col-m-9 { width: 75%; }
    .col-m-10 { width: 83.33%; }
    .col-m-11 { width: 91.66%; }
    .col-m-12 { width: 100%; }
}

/* Десктопы */
@media only screen and (min-width: 768px) {
    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

.social-icons {
    display: inline-block;
    width:32px;
    height:32px;
    border:5;
     margin: 4px 2px;
  cursor: pointer;
  }
  
  .social-icons a {
   
    transition: transform 0.3s ease;
  }
  
  .social-icons a:hover {
    transform: scale(1.1);
  }
  
  .social-icons img {
    border-radius: 10%; /* Круглые иконки */
    border: 1px solid #ddd; /* Граница */
  }
  @media screen and (max-width: 700px) {
  .social-icons {   
    flex-direction:  row;
  }

/* Видеоконтейнер */
.video-container {
     display: flex;
  justify-content: center;
  align-items: center;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
table {
    width: 100%;
    border-collapse: separate; /* Обязательно для border-spacing */
    border-spacing: 7px 5px; /* Сохраняем ваши отступы */
    border: 1px solid #399;
    margin: 15px 0; /* Добавляем отступы сверху/снизу */
}

th, td {
    text-align: center;
    border: 1px solid #333;
    padding: 10px; /* Увеличиваем для лучшей читаемости */
    background-color: #fff; /* Фон для ячеек */
    transition: background-color 0.3s; /* Плавное изменение цвета */
}

th {
    background-color: #f0f8ff; /* Светлый фон для заголовков */
    font-weight: bold;
    position: sticky;
    top: 0; /* Фиксируем заголовки при прокрутке */
}

tr:hover td {
    background-color: coral;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    table {
        border-spacing: 3px; /* Уменьшаем отступы */
        font-size: 14px; /* Уменьшаем размер шрифта */
    }
    
    th, td {
        padding: 6px; /* Уменьшаем отступы */
    }
}
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        display: block;
    }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .video-container {
        max-width: 100%;
    }
    
    /* Улучшение читаемости на мобильных */
    h1 { font-size: 24px; }
    h2, h3 { font-size: 20px; }
    h4, h5 { font-size: 18px; }
}

@media (max-width: 767px) {
    img {
        width: auto;
        object-fit: contain;
    }
}
@media (max-width: 767px) {
    .image-container {
        padding: 0 10px;
    }
}
/* Отключение параллакса на мобильных устройствах */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (hover: none) {
    .parallax {
        background-attachment: scroll;
        min-height: 50vh;
        background-size: contain;
    }
}

 .page-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh; /* центрирование по вертикали всей страницы */
        }
        
         .video-container {
            width: 100%;
            max-width: 560px;   /* небольшой размер (стандартная ширина 560px для 16:9) */
            margin: 0 auto;     /* центрирование по горизонтали */
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            overflow: hidden;   /* чтобы скругления обрезали углы видео */
        }
         .video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;            /* убираем рамку */
            display: block;
        }
        
         .video-item {
            margin-bottom: 30px;
        }
          @media (max-width: 480px) {
            .video-container {
                max-width: 94%;   /* на узких телефонах будет 94% от ширины экрана */
                border-radius: 12px;
            }
            body {
                padding: 10px;
            }
        }
        


 /* Контейнер для центрирования всего блока */
        .video-page-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 50vh;
            margin: 0;
            padding: 20px;
            background: #F0E68C; /* под ваш фон */
        }
        
        /* Основной контейнер видео */
        .rutube-video-container {
            max-width: 720px;      /* небольшой размер */
            width: 100%;
            margin: 0 auto;
        }
        
        /* Адаптивный блок для сохранения пропорций 16:9 */
        .video-responsive {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
            height: 0;
            overflow: hidden;
            background: #000;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        /* Сам iframe с видео */
        .video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Дополнительная подпись (опционально) */
        .video-caption {
            text-align: center;
            margin-top: 12px;
            font-family: 'Noto Serif', serif;
            font-size: 14px;
            color: #2F4F4F;
        }
        
        /* Планшеты и большие телефоны */
        @media (max-width: 768px) {
            .video-page-wrapper {
                padding: 15px;
            }
            .rutube-video-container {
                max-width: 90%;
            }
        }
        
        /* Маленькие телефоны */
        @media (max-width: 480px) {
            .video-page-wrapper {
                padding: 10px;
            }
            .rutube-video-container {
                max-width: 100%;
            }
            .video-responsive {
                border-radius: 8px;
            }
        }