* {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: rgb(var(--icons-color-153));
    box-sizing: border-box;
}

:root {
    font-size: 0.8vw;
    --font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-mono: "Fira Code VF", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    --smooth-shadow: 0px 1.3px 2.2px rgba(0, 0, 0, .02), 0px 3.1px 5.3px rgba(0, 0, 0, .028), 0px 5.8px 10px rgba(0, 0, 0, .035), 0px 10.3px 17.9px rgba(0, 0, 0, .042), 0px 19.2px 33.4px rgba(0, 0, 0, .05), 0px 46px 80px rgba(0, 0, 0, .07);
    --header-background-color-0-0-0: 0, 0, 0;
    --dropmenu-color-hover-90-185-0: 90, 185, 0;
    --icons-color-153: 153, 153, 153;
    --menu-border-bottom-74: 74, 74, 74;
    --body-background-color-51: 51, 51, 51;
    --header-background-color-35: 35, 35, 35;
}

#newsContainer .error,
.info {
    text-align: center;
}

.container {
    position: relative;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    overflow: hidden;
}


body {
    background-color: rgb(var(--body-background-color-51));
}

a {
    text-decoration: none;
}


/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

*::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgb(var(--body-background-color-51));
}

*::-webkit-scrollbar-track:hover {
    background-color: rgba(var(--body-background-color-51));
}

*::-webkit-scrollbar-track:active {
    background-color: rgba(var(--body-background-color-51));
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(var(--menu-border-bottom-74));
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--menu-border-bottom-74));
}

*::-webkit-scrollbar-thumb:active {
    background-color: rgba(var(--menu-border-bottom-74));
}

.header {
    height: 3vw;
    width: 100%;
    z-index: 900;
    /* Высокий z-index для размещения поверх фона */
    background-color: rgba(var(--header-background-color-0-0-0), 0.3);
    position: relative;
    /* Устанавливаем позиционирование */
    -webkit-box-shadow: 0px 15px 10px 0px rgba(var(--header-shadow-color-0-0-0), 0.3),
        0px 4px 5px 0px rgba(var(--header-shadow-color-0-0-0), 0.2);
    -moz-box-shadow: 0px 15px 10px 0px rgba(var(--header-shadow-color-0-0-0), 0.3),
        0px 4px 5px 0px rgba(var(--header-shadow-color-0-0-0), 0.2);
    box-shadow: 0px 15px 30px 0px rgba(var(--header-shadow-color-0-0-0), 0.3),
        0px 4px 5px 0px rgba(var(--header-shadow-color-0-0-0), 0.2);

    display: flex;
    /* Включаем Flexbox */
    justify-content: center;
    /* Центрируем по горизонтали */
    align-items: center;
    /* Центрируем по вертикали */
    gap: 1vw;
}

.header div .img {
    width: 2vw;
    height: 2vw;
    /* Указываем размеры блока */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0.3vw;
    transition: filter 0.2s ease;
    /* Плавный переход для фильтра */
}

.header div .img:hover {
    filter: grayscale(0%) brightness(0.8);
    /* Фильтр при наведении */
}



.header .button {
    width: 4.5vw;
    font-size: 0.9vw;
    text-align: center;
    position: relative;
    /* Это нужно для позиционирования псевдоэлемента и меню */
    padding: 0.5vw 0;
    /* Добавляем отступы сверху и снизу */
    cursor: pointer;
    /* Меняем курсор на указатель */
}


.header .button::after {
    content: '';
    /* Создаем пустой псевдоэлемент */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.15vw;
    /* Высота зеленой линии */
    background-color: var(--linear-color);
    /* Цвет линии */
    transform: scaleX(0);
    /* Изначально скрываем линию */
    transform-origin: right;
    /* Начинаем анимацию справа */
    transition: transform 0.5s ease;
    /* Плавная анимация */
    border-radius: 0.4vw;
}

.header .button:hover::after {
    transform: scaleX(1);
    /* Показываем линию при наведении */
    transform-origin: left;
    /* Анимация идет слева направо */
}

/* Общие стили для выпадающего меню */
.header .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(var(--header-background-color-35), 0.9);
    box-shadow: 0px 0.35vw 0.7vw rgba(var(--header-background-color-0-0-0), 0.2);
    padding: 1vw 0;
    border-bottom: 0.4vw;
    width: 12vw;
    /* Увеличиваем ширину для размещения значков и текста */
    z-index: 1000;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(-1vw);
}

/* Показать меню при наведении */
.header .button:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Стилизация пунктов меню с иконками */
.header .dropdown-menu a {
    display: flex;
    /* Используем flexbox для выравнивания иконок и текста */
    align-items: center;
    padding: 0.5vw 1vw;
    text-decoration: none;
    text-align: left;
    position: relative;
}

.social-links {
    display: flex;
    justify-content: flex-start;
    /* Выровнять элементы по началу строки */
}

.social-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Убираем подчеркивание */
    color: inherit;
    /* Сохраняем цвет текста */
}

.social-links a .icon {
    margin-right: 0.5vw;
    /* Отступ между иконкой и текстом */
    width: 1.5vw;
    /* Размер иконки */
    height: 1.5vw;
}



a img.icon {
    width: 1.3vw;
    /* Размер иконок */
    height: 1.3vw;
    margin-right: 0.5vw;
    /* Отступ между иконкой и текстом */
}

/* Подчеркивание при наведении */
.header .dropdown-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.15vw;
    background-color: var(--linear-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
}

.header .dropdown-menu a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header .dropdown-menu a:hover::after {
    transition: transform 0.5s ease-in-out;
    /* Применяется при переходах */
}

/* Стилизация пунктов меню с приписками активности */
.header .dropdown-menu a span.status {
    margin-left: auto;
    /* Отталкиваем текст активности вправо */
    font-size: 0.6vw;
    font-weight: bold;
}

span.status.active {
    color: #90ee90;
    /* Зеленый цвет для статуса "Активен" */
}

span.status.freeze {
    color: #90cdee;
    /* Синий цвет для статуса "Заморожен" */
}

span.status.stopped {
    color: rgb(153, 153, 153);
    /* Серый цвет для статуса "Завершён" */
}


/* Разделительные линии между секциями */
.header .dropdown-menu p {
    margin: 0.35vw 0;
    cursor: default;
    padding: 0.35vw 0.7vw;
    font-weight: bold;
    border-bottom: 1px solid rgba(var(--menu-border-bottom-74));
}

/*======================================*/

.linear {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2%;
    /* Уже есть */
    margin-bottom: 2%;
    /* Добавляем отступ снизу */
    z-index: 1;
    /* Добавляем для контроля наложения */
    width: 80%;
    background-color: transparent;
    /* Сделаем фон прозрачным, чтобы линии создавались псевдоэлементами */
}

.linear::before,
.linear::after {
    content: "";
    flex: 1;
    height: 0.25vw;
    border-radius: 0.25vw;
    background-color: var(--linear-color);
    /* Цвет линии */
}

.linear::before {
    margin-right: 1vw;
    /* Отступ от текста */
}

.linear::after {
    margin-left: 1vw;
    /* Отступ от текста */
}

.linear span {
    font-size: 2vw;
    white-space: nowrap;
    /* Предотвращает перенос текста */
    color: white;
    /* Цвет текста */
}

.a-reset {
    all: unset;
    /* Сбрасывает все стили */
    display: inline;
    /* Восстанавливает базовое поведение тега a */
    text-decoration: none;
    /* Убирает подчеркивание */
    color: inherit;
    /* Наследует цвет текста от родителя */
    cursor: pointer;
    /* Устанавливает курсор в виде указателя */
}


.header .dropdown-menu.mobile a:hover {
    background-color: rgba(var(--dropmenu-color-hover-90-185-0), 0.3);
    /* Подсветка при наведении */
}


.header-status-wrapper {
    display: flex;
    align-items: center;
    /* Центрирует элементы по вертикали */
}

.header-status-wrapper .status {
    margin-left: 0.5vw;
    /* Отступ между заголовком и статусом */
    font-size: 1.2vw;
    font-weight: bold;
}

.header-status-wrapper span.status.active {
    color: #90ee90;
    /* Зеленый цвет для статуса "Активен" */
}

.header-status-wrapper span.status.freeze {
    color: #90cdee;
    /* Синий цвет для статуса "Заморожен" */
}

.header-status-wrapper span.status.stopped {
    color: rgb(153, 153, 253);
    /* Серый цвет для статуса "Завершён" */
}


.header .menu-toggle {
    display: none;
    /* Скрываем кнопку на больших экранах */
    width: 10vw;
    height: 10vw;
    background-image: url(/img/icons/icons8-menu.svg);
    /* Иконка меню */
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: background-image 0.3s ease;
}

/* Иконка закрытия */
.header .menu-toggle.active {
    background-image: url(/img/icons/icons8-close.svg);
}

/* Базовые стили */
.menu-toggle {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 2000;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    flex-direction: column;
    background-color: rgba(var(--header-background-color-35), 0.7);
    position: absolute;
    margin-top: 3vw;
    top: 10vw;
    left: 0;
    width: 100%;
    box-shadow: 0px 8px 16px rgba(var(--header-background-color-0-0-0), 0.2);
    z-index: 1000;
    gap:0;
    border-bottom: 1vw solid var(--linear-color);
}

/* Показываем меню, когда добавлен класс 'show' */
.mobile-menu.show {
    display: flex;
}

/* Основное меню */
.mobile-menu .menu-item {
    color: white;
    font-size: 6vw;
    text-align: center;
    background-color: inherit;
    border-bottom: 1px solid rgba(var(--menu-border-bottom-74));
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
}

/* Подсветка основных кнопок */
.mobile-menu .menu-item a {
    padding: 2vw;
    display: inherit;
    width: 100%;
    height: 100%;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s;
    box-sizing: border-box;
}


.mobile-menu .menu-item a:hover {
    background-color: var(--linear-color);
}

/* Общие стили для подменю */
.submenu {
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: all 0.3s ease;
}

.submenu::before {
    content: "";
    position: absolute;
    bottom: -12.25vw;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; /* Полупрозрачное затемнение */
    opacity: 0.5; /* Интенсивность затемнения */
    z-index: -1; /* Чтобы затемнение не перекрывало содержимое */
    pointer-events: none; /* Для предотвращения блокировки кликов */
}


/* Видимое подменю */
.submenu.show {
    display: flex;
    opacity: 1;
}

/* Элементы подменю */
.submenu-item {
    display: flex;
    color: inherit;
    font-size: 5vw;
    width: 100%;
    justify-content: space-between;
}
.submenu-item > span {
    color: inherit;
    padding: 1.5vw 4vw 1.5vw 4vw;
}



/* Подсветка ссылки в подменю */
.submenu-item a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Оформление заголовка подменю */
.submenu-header {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    padding-top: 3vw;
    padding-bottom: 1vw;
    width: 100%;
    border-bottom: 3px solid rgba(var(--menu-border-bottom-74));
}

.submenu-item .status {
    font-weight: bold;
    font-size: 4vw;
    justify-content: center;
}

/* Подсветка каждой кнопки индивидуально */
.submenu-item:hover a {
    background-color: var(--linear-color);
}

.site-footer {
    background-color: rgb(var(--body-background-color-51));
    /* Цвет подвала */
    color: white;
    /* Текст белого цвета для контраста */
    padding: 2vw;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.footer-nav {
    margin-top: 1vw;
    font-size: 1vw;
}

.footer-nav a {
    color: white;
    /* Цвет ссылок */
    text-decoration: none;
    margin: 0 1vw;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: rgb(140, 140, 140);
    /* Цвет при наведении */
}

.footer-nav .social-links a .icon {
    transition: filter 0.3s;
}

.footer-nav .social-links a:hover .icon {
    filter: grayscale(0%) brightness(0.6);
}

.info-block__content .social-links a .icon {
    transition: filter 0.3s;
}

.info-block__content .social-links a:hover .icon {
    filter: grayscale(0%) brightness(0.6);
}

.error,
.info {
    font-size: 1.2vw;
}


/* Адаптация до 2560px */
@media screen and (max-width: 2560px) {
    .header {
        height: 2vw;
    }

    .header div .img {
        width: 1.5vw;
        height: 1.5vw;
        /* Указываем размеры блока */
    }

    a img.icon {
        width: 1.2vw;
        height: 1.2vw;
        margin-right: 0.5vw;
    }

    .header .button {
        width: 4vw;
        font-size: 0.8vw;
    }

    .header .dropdown-menu {
        padding: 0.25vw 0;
        border-bottom: 0.2vw;
        width: 12vw;
        /* Увеличиваем ширину для размещения значков и текста */
    }

    .header .dropdown-menu a {
        padding: 0.40vw 0.75vw;
    }

    .header-status-wrapper .status {
        font-size: 1vw;
    }

    .footer-nav,
    .footer-content,
    .footer-nav .social-links {
        justify-content: center;
        font-size: 0.8vw;
    }

    .footer-nav .social-links {
        margin-top: 0.5vw;
    }

    .footer-nav .social-links a .icon {
        width: 1vw;
        height: 1vw;
    }
}

/* Адаптация до 1920px */
@media screen and (max-width: 1920px) {
    .header {
        height: 3vw;
    }

    .header div .img {
        width: 2vw;
        height: 2vw;
        /* Указываем размеры блока */
    }

    .header .button {
        width: 4.5vw;
        font-size: 0.9vw;
    }

    .header .dropdown-menu {
        padding: 0.5vw 0;
        border-bottom: 0.4vw;
        width: 12vw;
        /* Увеличиваем ширину для размещения значков и текста */
    }

    .header .dropdown-menu a {
        padding: 0.5vw 1vw;
    }

    .header-status-wrapper .status {
        font-size: 0.8vw;
    }

}

/* Адаптация до 1600px */
@media screen and (max-width: 1600px) {}

/* Адаптация до 1440px */
@media screen and (max-width: 1440px) {}

/* Мобильная версия до 1280px */
@media screen and (max-width: 1280px) {

    .header {
        height: 4vw;
    }

    .header div .img {
        width: 3vw;
        height: 3vw;
        /* Указываем размеры блока */
    }

    .header .button {
        width: 6vw;
        font-size: 1.2vw;
    }

    /* Подчеркивание при наведении */
    .header .dropdown-menu a::after {
        height: 0.25vw;
    }

    .header .button::after {
        height: 0.25vw;
        /* Высота зеленой линии */
        border-radius: 0.4vw;
    }

    .linear::before,
    .linear::after {
        height: 0.4vw;
        border-radius: 0.25vw;
        margin-top: 0;
    }

    .linear span {
        font-size: 3vw;
    }

    .social-links {
        gap: 0.5vw;
        display: flex;
        justify-content: flex-start;
        /* Выровнять элементы по началу строки */
        font-size: 3vw;
    }

    .social-links a {
        display: flex;
        align-items: center;
        text-decoration: none;
        /* Убираем подчеркивание */
        color: inherit;
        /* Сохраняем цвет текста */
    }

    .social-links a .icon {
        width: 2.25vw;
        /* Размер иконки */
        height: 2.25vw;
    }

    .footer-nav,
    .footer-content,
    .footer-nav .social-links {
        justify-content: center;
        font-size: 1.5vw;
    }

    .footer-nav .social-links {
        margin-top: 1vw;
    }

    .footer-nav .social-links a .icon {
        width: 1.5vw;
        height: 1.5vw;
    }

}

/* ПК версия 1081px и выше) */
@media screen and (min-width: 1081px) {

    .mobile-menu {
        display: none;
        /* Скрываем меню на больших экранах */
    }

    .menu-toggle {
        display: none;
        /* Скрываем кнопку меню на больших экранах */
    }

    /* Убираем класс активности для кнопки и подменю */
    .mobile-menu.show,
    .menu-item.active+.submenu {
        display: none;
        /* Скрываем подменю на больших экранах */
    }

}

/* Для экранов до 1080px */
@media screen and (max-width: 1080px) {

    .container {
        width: 90%;
    }

    .header {
        height: 13vw;
        flex-direction: row;
        justify-content: space-between;
        padding: 1vw 2vw;
    }

    .header div .img {
        border-radius: 1.2vw;
        width: 10vw;
        height: 10vw;
        /* Указываем размеры блока */
    }

    .header .menu-toggle,
    .menu-toggle {
        display: block;
        /* Показываем кнопку на мобильных экранах */
    }

    .social-submenu-mobile{
        justify-content: center;
        align-items: center;
    }

    .header .button,
    .mobile-menu {
        display: none;
        /* Скрываем кнопки на мобильных экранах */
    }

    .mobile-menu.show,
    .menu-item.active+.submenu {
        display: flex;
    }

    .header-status-wrapper {
        align-items: flex-start;
        /* Выравниваем по началу (влево) */
    }

    .header-status-wrapper .status {
        font-size: 4vw;
        margin-left: 2vw;
        margin-top: 1.5vw;
        /* Добавляем отступ снизу для разделения статусов */
    }

    .social-links {
        gap: 2vw;
        display: flex;
        justify-content: flex-start;
        font-size: 3vw;
    }

    .social-links a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
    }

    .social-links a .icon {
        width: 7vw;
        height: 7vw;
    }

    a img.icon {
        width: 5vw;
        height: 5vw;
        justify-items: center;
    }

    .linear {
        width: 90%;
    }

    .linear span {
        font-size: 5vw;
    }

    .linear::before,
    .linear::after {
        content: "";
        flex: 1;
        height: 0.75vw;
        border-radius: 0.25vw;
        margin-top: 0;
        background-color: var(--linear-color);
        /* Цвет линии */
    }

    .footer-nav,
    .footer-content,
    .footer-nav .social-links {
        justify-content: center;
        font-size: 3vw;
    }

    .footer-nav .social-links a .icon {
        width: 3vw;
        height: 3vw;
    }

    .error,
    .info {
        font-size: 3vw;
    }
}

/* Мобильная версия до 1024px */
@media screen and (max-width: 1024px) {
    .linear {
        width: 90%;
    }

    .linear span {
        font-size: 6vw;
    }
}

/* Мобильная версия до 900px */
@media screen and (max-width: 900px) {
    .linear {
        width: 90%;
    }

    .linear span {
        font-size: 6vw;
    }
}

/* Для экранов до 768px */
@media screen and (max-width: 768px) {}

/* Для экранов до 480px */
@media screen and (max-width: 480px) {}

/* Мобильная версия до 320px */
@media screen and (max-width: 320px) {
    .linear {
        width: 90%;
    }

    .linear span {
        font-size: 6vw;
    }
}