body {
    font-family: Arial, sans-serif;
    background: url('https://i.redd.it/86yagye25g841.png') no-repeat center center fixed; /* Замените на URL вашего фона */
    background-size: cover; /* Масштабируем фон */
    color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: rgba(51, 51, 51, 0.2); /* Полупрозрачный фон для заголовка */
    backdrop-filter: blur(5px);
    padding: 10px 20px; /* Уменьшены отступы для компактности */
}

.header-content {
    display: flex; /* Используем Flexbox для расположения элементов */
    justify-content: space-between; /* Распределяем пространство между элементами */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
}

.site-title {
    font-size: 1.2em; /* Уменьшаем размер шрифта для названия сайта */
    color: #ffffff; /* Цвет текста */
    margin: 0; /* Убираем отступы */
}

.main-nav {
    display: flex; /* Используем Flexbox для навигации */
    background-color: #444; /* Цвет фона для навигации */
    padding: 5px 10px; /* Отступы внутри навигации */
    border-radius: 8px; /* Закругленные края */
}

.auth-button {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px; /* Отступы между кнопками */
    font-weight: bold;
    transition: color 0.3s;
}

.auth-button:hover {
    color: #ff5722; /* Цвет при наведении */
}

.modal {
    display: none; /* Скрываем модальное окно по умолчанию */
    position: fixed; /* Фиксируем модальное окно */
    z-index: 1; /* Устанавливаем уровень отображения */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    backdrop-filter: blur(8px); /* Размытие фона */
}

body.modal-open {
    overflow: hidden; /* Отключаем прокрутку страницы */
}

.no-video-frame {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    color: var(--text-color);
    font-size: 1.1rem;
}

.demon-video {
    background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для контейнера */
    border-radius: 8px; /* Закругленные углы */
    padding: 10px; /* Отступы внутри контейнера */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
    overflow: hidden; /* Скрываем переполнение */
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
}

.demon-video iframe {
    background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для контейнера */
    border-radius: 8px; /* Закругленные углы */
    padding: 10px; /* Отступы внутри контейнера */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
    overflow: hidden; /* Скрываем переполнение */
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
}

.demon-details {
    background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для контейнера */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
    overflow: hidden; /* Скрываем переполнение */
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demon-details p {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1rem;
}

.modal-content {
    padding: 20px; /* Отступы внутри модального окна */
    width: 90%; /* Ширина модального окна */
    max-width: 600px; /* Максимальная ширина */
    border-radius: 10px; /* Закругленные углы */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Тень для глубины */
    position: absolute; /* Позиционируем относительно родителя */
    top: 50%; /* Сдвигаем вниз на 50% высоты родителя */
    left: 50%; /* Сдвигаем вправо на 50% ширины родителя */
    transform: translate(-50%, -50%); /* Центрируем по обеим осям */
    z-index: 10;
}

.modal-content h2 {
    color: #fff; /* Цвет заголовка */
    margin-bottom: 15px; /* Отступ снизу */
}

.modal-content p {
    color: #ddd; /* Цвет текста */
    line-height: 1.5; /* Межстрочный интервал */
}

.modal-content img {
    max-width: 100%; /* Ограничиваем ширину изображения */
    height: auto; /* Сохраняем пропорции изображения */
    display: block; /* Делаем изображение блочным элементом */
    margin: 0 auto; /* Центрируем изображение */
    border-radius: 5px; /* Закругленные углы для изображений */
}

.modal-close {
    background-color: #e74c3c; /* Цвет кнопки закрытия */
    color: #fff; /* Цвет текста кнопки */
    border: none; /* Убираем границу */
    padding: 10px 15px; /* Отступы внутри кнопки */
    border-radius: 5px; /* Закругленные углы кнопки */
    cursor: pointer; /* Указатель при наведении */
    float: right; /* Выравнивание кнопки вправо */
}

.modal-close:hover {
    background-color: #c0392b; /* Цвет кнопки при наведении */
}


.close {
    color: #aaa; /* Цвет кнопки закрытия */
    float: right; /* Выравнивание кнопки закрытия вправо */
    font-size: 28px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    z-index: 100;
}

.close:hover,
.close:focus {
    color: #ff5722; /* Цвет при наведении */
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer; /* Указатель при наведении */
}

form {
    display: flex;
    flex-direction: column; /* Вертикальное расположение элементов формы */
}

label {
    margin: 10px 0 5px; /* Отступы для меток */
}

input[type="text"],
input[type="password"] {
    padding: 10px; /* Отступы внутри полей ввода */
    border: 1px solid #ccc; /* Граница полей ввода */
    border-radius: 4px; /* Закругленные углы */
    background-color: rgba(51, 51, 51, 0.4);
    color: white;
}

button[type="submit"] {
    background-color: rgba(255, 87, 34, 0.4);
    color: white; /* Цвет текста кнопки */
    border: none; /* Убираем границу */
    padding: 10px; /* Отступы внутри кнопки */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s; /* Плавный переход цвета */
    margin-top: 10px; /* Добавляем отступ сверху */
}


button[type="submit"]:hover {
    background-color: rgba(230, 74, 25, 0.6);
}

.main-nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px; /* Отступы между ссылками */
    font-weight: bold;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: #ff5722; /* Цвет при наведении */
}

h1 {
    margin: 0;
    font-size: 2.5em;
}

nav:hover {
    background-color: rgba(48, 48, 48, 0.5);
}

nav {
    background-color: rgba(68, 68, 68, 0.2); /* Полупрозрачный фон для навигации */
    backdrop-filter: blur(5px);
    padding: 10px;
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем содержимое по горизонтали */
}

nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px; /* Отступы между ссылками */
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    color: #ff5722; /* Цвет при наведении */
}

.container {
    flex: 1; /* Позволяет контейнеру занимать оставшееся пространство */
    width: 80%;
    margin: auto;
    padding: 20px;
}

.levels-wrapper {
    display: flex; /* Используем Flexbox для расположения уровней и дополнительной информации */
    justify-content: space-between; /* Распределяем пространство между элементами */
}

#levelList {
    flex: 1; /* Уровни занимают оставшееся пространство */
    margin-right: 20px; /* Отступ между списком уровней и дополнительной информацией */
}

.extra-info {
    background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для дополнительной информации */
    backdrop-filter: blur(5px);
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    width: 250px; /* Устанавливаем фиксированную ширину для блока с дополнительной информацией */
    max-height: 765px; /* Ограничиваем максимальную высоту, чтобы не выходить за пределы экрана */
}

.info-item {
    display: block; /* Скрываем все элементы по умолчанию */
}

.info-item.active {
    display: block; /* Показываем активный элемент */
}

.card {
    background-color: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    flex: 1;
    transition: transform 0.2s; /* Плавная анимация */
}

.card:hover {
    transform: scale(0.95); /* Уменьшение карточки при наведении */
}

.card:active {
    background-color: rgba(34, 34, 34, 0.7); /* Изменение фона при нажатии */
}

.image-container {
    position: relative; /* Устанавливаем относительное позиционирование для контейнера изображения */
    width: 200px; /* Увеличиваем ширину для изображения */
    height: auto; /* Автоматическая высота */
    margin-right: 15px; /* Отступ между изображением и текстом */
}

.card img {
    width: 100%; /* Увеличиваем ширину изображения */
    height: auto; /* Автоматическая высота */
    border-radius: 5px; /* Закругленные углы */
}

.play {
    position: absolute; /* Абсолютное позиционирование для кнопки */
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем кнопку на половину её ширины и высоты */
    width: 50px; /* Ширина кнопки */
    height: 50px; /* Высота кнопки */
    background: url('https://img.icons8.com/ios-filled/50/ffffff/play.png') no-repeat center center; /* Иконка Play */
    background-size: contain; /* Масштабируем иконку */
    cursor: pointer; /* Указатель при наведении */
    text-indent: -9999px; /* Скрываем текст */
    transition: background-color 0.3s; /* Плавный переход цвета */
    border-radius: 8px; /* Закругленные углы для контейнера виджета */
    overflow: hidden; /* Скрываем переполнение, чтобы углы были закругленными */
}

.discord-widget {
    background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для контейнера */
    border-radius: 8px; /* Закругленные углы */
    padding: 10px; /* Отступы внутри контейнера */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Тень для контейнера */
    overflow: hidden; /* Скрываем переполнение */
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
}

.discord-widget iframe {
    background-color: transparent; /* Прозрачный фон для iframe */
    border: none; /* Убираем рамку */
    width: 100%; /* Задаем ширину 100% для адаптивности */
    height: 350px; /* Задаем высоту 100% для адаптивности */
}

.play-container:hover {
    background-color: rgba(255, 255, 255, 0.6); /* Изменяем цвет фона при наведении */
}

.text-container {
    flex: 1; /* Позволяет тексту занимать оставшееся пространство */
}

.text-container p {
    color: #dddddd; /* Более светло-серый цвет текста */
    margin: 5px 0; /* Отступы для текста */
}

.button {
    background-color: #ff5722;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.button:hover {
    background-color: #e64a19;
    transform: scale(1.05);
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s forwards; /* Анимация на 0.5 секунд */
}

@keyframes fadeOut {
    from {
        opacity: 1; /* Начальная непрозрачность */
    }
    to {
        opacity: 0; /* Конечная непрозрачность */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.about-container {
    background-color: #333;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.copyright {
    margin-top: 20px;
    font-size: 14px;
}

footer {
    background-color: rgba(51, 51, 51, 0.5); /* Полупрозрачный фон */
    backdrop-filter: blur(5px);
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

footer h2 {
    margin: 0;
    font-size: 1.5em;
}

footer p {
    margin: 5px 0;
}

@media (max-width: 768px) {
    .demon-details {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .demon-video { 
        padding-top: 75%; /* Соотношение сторон 4:3 для мобильных устройств */
    }

    .modal-content {
        padding: 1.5rem;
    }
    
    .container {
        width: 95%; /* Увеличиваем ширину контейнера на мобильных устройствах */
        padding: 10px; /* Уменьшаем отступы */
    }

    nav a {
        margin: 0 10px; /* Уменьшаем отступы между ссылками */
    }

    footer h2 {
        font-size: 1.2em; /* Уменьшаем размер заголовка футера */
    }

    #levelList {
        margin-right: 0; /* Убираем отступ справа */
        margin-bottom: 20px; /* Добавляем отступ снизу */
    }

    .extra-info {
        width: 100%; /* Увеличиваем ширину блока с дополнительной информацией */
        max-width: 600px; /* Максимальная ширина блока */
        margin: 20px auto; /* Центрируем блок с отступом сверху и снизу */
        padding: 20px; /* Отступы внутри блока */
        background-color: rgba(34, 34, 34, 0.5); /* Полупрозрачный фон для дополнительной информации */
        color: #ffffff; /* Цвет текста */
        border-radius: 8px; /* Закругленные углы */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Тень */
        box-sizing: border-box; /* Учитываем отступы и границы в ширине */
        text-align: center; /* Центрируем текст внутри блока */
    }

    .levels-wrapper {
        display: flex; /* Используем Flexbox для расположения уровней и дополнительной информации */
        flex-direction: column; /* Изменяем направление на колонку для мобильных устройств */
        align-items: center; /* Центрируем элементы по горизонтали */
    }

    .card {
        flex-direction: row; /* Сохраняем горизонтальное расположение на мобильных устройствах */
    }

    .image-container {
        width: 100px; /* Уменьшаем ширину для мобильных устройств */
        margin-right: 15px; /* Отступ между изображением и текстом */
    }

    .play {
        width: 30px; /* Ширина кнопки */
        height: 30px; /* Высота кнопки */
    }
}