/* Определяем основные шрифты для страницы */
@font-face {
    font-family: 'TschicholdBold';
    src: url('./TschicholdBold.woff') format('woff');
}

html, body {
    overflow-x: hidden; /* Отключает горизонтальную прокрутку */
    font-family: 'TschicholdBold', Arial, sans-serif; /* Устанавливает шрифт для всего текста на странице */
    background-image: url('images/background/6.jpg'); /* Устанавливает изображение фоном */
    background-size: cover; /* Растягивает изображение на всю страницу */
    background-repeat: no-repeat; /* Запрещает изображению повторяться */
    background-attachment: fixed; /* Фиксирует изображение на месте при прокрутке */
    color: #ffffff; /* Устанавливает белый цвет текста */
    text-align: center; /* Выравнивает текст по центру */
    margin: 0; /* Убирает отступы у краев страницы */
    padding: 0; /* Убирает внутренние отступы у краев страницы */
}

p {
    letter-spacing: 1px; /* Устанавливает отступ между буквами в 1 пиксель */
}

.language-switcher {
    display: flex; /* Устанавливаем flex контейнер */
    justify-content: center; /* Центрируем элементы по горизонтали */
    gap: 8px; /* Устанавливаем промежуток между элементами */
    margin-top: 5px; /* Добавляем отступ сверху */
}

.lang-btn {
    display: flex; /* Устанавливаем flex контейнер */
    align-items: center; /* Центрируем элементы по вертикали */
    margin-right: 2px; /* Добавляет отступы между кнопками */
    padding: 5px 10px; /* Добавляет внутренние отступы */
    border: none; /* Убирает рамку */
    border-radius: 4px; /* Добавляет скругление углов */
    background-color: #999999; /* Устанавливает цвет фона */
    color: #000000; /* Устанавливает цвет текста */
    cursor: pointer; /* Устанавливает курсор в виде указателя */
    font-weight: bold; /* Устанавливает жирный шрифт */
    transition: background-color 0.3s ease; /* Добавляет плавный переход при изменении цвета фона */ 
}

.lang-btn:hover {
    background-color: #ffffff; /* Устанавливает цвет фона при наведении */
}

.flag-icon {
    width: 20px; /* Устанавливает ширину флага */
    height: 20px; /* Устанавливает высоту флага */
    margin-right: 5px; /* Добавляет отступ справа от флага */
}

.container {
    margin: 20px auto; /* Устанавливает отступы сверху и снизу 20px, а слева и справа автоматически */
    width: 90%; /* Устанавливает ширину контейнера на 90% от ширины родительского элемента */
    max-width: 400px; /* Устанавливает максимальную ширину контейнера на 400px */
    background-color: #ff265ca4; /* Устанавливает полупрозрачный черный фон контейнера */
    padding: 20px; /* Устанавливает внутренние отступы в контейнере */
    border-radius: 10px; /* Устанавливает скругленные углы у контейнера */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Добавляет тень контейнеру */
}

.profile-img {
    width: 100px; /* Устанавливает ширину изображения профиля */
    height: 100px; /* Устанавливает высоту изображения профиля */
    border-radius: 25px; /* Добавляет немного закругленные углы к изображению профиля */
    margin: 0 auto; /* Выравнивает изображение по центру */
    box-shadow: 0 0 15px #000000; /* Добавляет тень изображению профиля */
}

h1 {
    margin: 20px 0 10px; /* Устанавливает отступы сверху и снизу 20px, а слева и справа 0 */
}

p {
    margin: 0 0 20px; /* Устанавливает отступы сверху 0, снизу 20px и слева/справа 0 */
}

.link-container {
    display: flex; /* Устанавливает контейнер ссылок как flex-контейнер */
    flex-direction: column; /* Устанавливает направление элементов в колонку */
    gap: 10px; /* Устанавливает промежуток между элементами 10px */
}

.link {
    display: flex; /* Устанавливает ссылки как flex-элементы */
    align-items: center; /* Выравнивает элементы по центру по вертикали */
    padding: 10px; /* Устанавливает внутренние отступы для ссылок */
    border-radius: 20px; /* Добавляет скругление углов к ссылкам */
    background-color: #ffffff; /* Устанавливает белый цвет фона для ссылок */
    color: #000000; /* Устанавливает черный цвет текста для ссылок */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
    font-weight: bold; /* Устанавливает жирный шрифт для текста ссылок */
    letter-spacing: 2px; /* Устанавливает отступ между буквами в 2 пикселя */
    transition: background-color 0.3s ease; /* Добавляет плавный переход при изменении цвета фона ссылок */
    cursor: pointer; /* Устанавливает курсор в виде указателя при наведении на ссылки */
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1); /* Добавляет тень ссылкам */
}

.link:hover {
    background-color: #999999; /* Устанавливает более светлый серый цвет фона при наведении на ссылки */
}

.link .icon {
    width: 20px; /* Устанавливает ширину иконок */
    height: 20px; /* Устанавливает высоту иконок */
    margin-right: 10px; /* Устанавливает отступ справа от иконок */
}

.link .text {
    flex-grow: 1; /* Устанавливает растяжимость текста ссылок */
    text-align: center; /* Выравнивает текст по центру */
    margin-left: -20px; /* Корректирует смещение текста для центрирования */
    font-size: 20px; /* Устанавливает размер текста на кнопках */
}

.video-container {
    margin-top: 15px; /* Устанавливает отступ сверху для видео-контейнера */
    width: 100%; /* Устанавливает ширину видео-контейнера на 100% */
    position: relative; /* Устанавливает позиционирование контейнера как относительное */
    padding-bottom: 56.25%; /* Устанавливает соотношение сторон видео 16:9 */
    height: 0; /* Обнуляет высоту видео-контейнера */
}

.video-container iframe {
    position: absolute; /* Устанавливает позиционирование видео как абсолютное */
    top: 0; /* Устанавливает позицию видео сверху */
    left: 0; /* Устанавливает позицию видео слева */
    width: 100%; /* Устанавливает ширину видео на 100% */
    height: 100%; /* Устанавливает высоту видео на 100% */
    border-radius: 25px; /* Добавляет скругленные углы к видео */
}

.video-text {
    margin-top: 20px; /* Устанавливает отступ сверху для текста видео */
}

.video-text p {
    font-size: 15px; /* Устанавливает размер шрифта в 15 пикселей */
}

/* Медиазапросы для адаптации под различные устройства */
@media (max-width: 768px) {
    .container {
        width: 80%; /* Устанавливает ширину контейнера на 80% от ширины родительского элемента */
        padding: 18px; /* Устанавливает внутренние отступы в контейнере */
    }

    .profile-img {
        width: 80px; /* Устанавливает ширину изображения профиля */
        height: 80px; /* Устанавливает высоту изображения профиля */
    }

    .link .icon {
        margin-right: 8px; /* Уменьшает отступ справа от иконок */
    }

    .link .text {
        margin-left: -15px; /* Устанавливает отрицательное смещение для центрирования текста ссылок */
        font-size: 18px; /* Уменьшает размер текста для еще меньших экранов */
    }
}

@media (max-width: 480px) {
    .container {
        width: 85%; /* Устанавливает ширину контейнера на 85% от ширины родительского элемента */
        padding: 15px; /* Устанавливает внутренние отступы в контейнере */
    }

    .profile-img {
        width: 60px; /* Устанавливает ширину изображения профиля */
        height: 60px; /* Устанавливает высоту изображения профиля */
    }

    .link .icon {
        margin-right: 5px; /* Уменьшает отступ справа от иконок */
    }

    .link .text {
        margin-left: -10px; /* Устанавливает отрицательное смещение для центрирования текста ссылок */
        font-size: 15px; /* Уменьшает размер текста для еще меньших экранов */
    }
}