body {
    font-family: Arial, sans-serif;
    background-color: #4B0082; /* Цвет фона */
    color: #FFFFFF; /* Цвет текста */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

#snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Снежинки не должны мешать кликам */
            z-index: -1;
        }

        .snowflake {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('img/snow.png'); /* Путь к картинке снежинки */
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0.8;
        }
		
a {
        color: #FFFF00; /* Постоянный жёлтый цвет */
        text-decoration: none; /* Убираем подчеркивание */
    }
    
    /* Для всех состояний ссылки: при наведении, нажатии, посещении */
    a:visited,
    a:hover,
	a:focus,
    a:active {
        color: #FFFF00; /* Оставляем тот же цвет во всех состояниях */
        text-decoration: none; /* Убираем подчеркивание */
    }

.highlighted-link {
            color: #800080; /* Цвет выделенной ссылки */
        }

.highlighted-link:visited,		
.highlighted-link:hover,
.highlighted-link:focus,
.highlighted-link:active {
            color: #800080; /* Цвет при наведении, фокусе и нажатии */
        }
		
h1 {
    color: #FFFFFF; /* Цвет заголовка */
}

p {
    color: #FFFFFF; /* Цвет текста описания */
}

.vjs-control-bar {
    display: none; /* Скрываем панель управления плеером */
}

.vjs-http-source-selector {
    display: block !important;
}


/* Стили для кнопки */
#startButton,
.vjs-modal-dialog vjs-hidden  vjs-text-track-settings {
    position: relative; /* Задаем относительное позиционирование */
    left: -2000px; /* Сдвигаем кнопку на 500 пикселей влево */
    transition: left 0.5s ease; /* Добавляем плавный переход */
}

/* Общие стили для блоков */
#countdown,
#startButton,
#videoPlayer,
#message,
#soundMessage,
#transdescription,
#cnt {
    width: 50%; /* Устанавливаем ширину блока на 50% */
    margin: 20px auto; /* Центрируем блок по горизонтали */
    padding: 10px; /* Добавляем отступы внутри блока */
    background-color: #4B0082; /* Цвет фона блока */
    border: 1px solid #ccc; /* Рамка вокруг блока */
    border-radius: 5px; /* Скругление углов блока */
    color: white;
}

#countdown {
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
}

#message {
    display: none; /* Скрываем сообщение изначально */
    font-size: 24px;
    color: white;
}

#transdescription h3 {
    /* Можно добавить стили для заголовка здесь, если нужно */
    color: white;
}

#transdescription p {
    color: white; /* Меняем цвет текста в <p> */
}

/* Блоки один под одним на мобильных устройствах */
@media (max-width: 768px) {
    video, #countdown, #soundMessage, #message, #transdescription {
        width: 100%;
        margin-bottom: 20px; /* Отступы между блоками */
    }

    video {
        height: auto;
    }

    #videoPlayer {
        width: 100%; /* Плеер будет растягиваться на всю ширину */
        border: none;
    }

    #transdescription {
        width: 100%;
    }
	
	#cnt {
    width: 100%; /* Устанавливаем ширину блока на 50% */
    margin: 20px; /* Центрируем блок по горизонтали */
	}
	
	a {
        color: #FFFF00; /* Постоянный жёлтый цвет */
        text-decoration: none; /* Убираем подчеркивание */
    }
    
    /* Для всех состояний ссылки: при наведении, нажатии, посещении */
    a:visited,
    a:hover,
	a:focus,
    a:active {
        color: #FFFF00; /* Оставляем тот же цвет во всех состояниях */
        text-decoration: none; /* Убираем подчеркивание */
    }

.highlighted-link {
            color: #FFFF00; /* Цвет выделенной ссылки */
        }

.highlighted-link:visited,		
.highlighted-link:hover,
.highlighted-link:focus,
.highlighted-link:active {
            color: #FFFF00; /* Цвет при наведении, фокусе и нажатии */
        }
		
		.schedule-block li {
        margin: 10px 0; /* Отступы между элементами списка */
        padding: 10px; /* Отступы внутри элементов списка */
        #background-color: #9370DB; /* Цвет фона для каждого элемента */
        border-radius: 3px; /* Скругление углов элементов списка */
        border: 1px solid #eee; /* Рамка для элементов списка */
        color: #FFFFFF; /* Цвет текста */
    }

    .schedule-block li strong {
        color: #E0C038; /* Цвет выделенного текста */
    }
	
}

/* Блоки для обычных экранов */
@media (min-width: 769px) {
    video {
        width: 640px; /* Ширина плеера на больших экранах */
        height: 480px;
    }

    .schedule-block {
        width: 50%; /* Устанавливаем ширину блока на 50% */
        margin: 20px auto; /* Центрируем блок по горизонтали */
        padding: 15px; /* Добавляем отступы внутри блока */
        background-color: #4B0082; /* Цвет фона блока */
        border: 1px solid #b3d4ff; /* Рамка вокруг блока */
        border-radius: 5px; /* Скругление углов блока */
    }

    .schedule-block h3 {
        text-align: center; /* Центрируем заголовок */
        color: white;
    }

    .schedule-block ul {
        list-style: none; /* Убираем маркеры у списка */
        padding: 0; /* Убираем отступы */
    }

    .schedule-block li {
        margin: 10px 0; /* Отступы между элементами списка */
        padding: 10px; /* Отступы внутри элементов списка */
        #background-color: #9370DB; /* Цвет фона для каждого элемента */
        border-radius: 3px; /* Скругление углов элементов списка */
        border: 1px solid #eee; /* Рамка для элементов списка */
        color: #FFFFFF; /* Цвет текста */
    }

    .schedule-block li strong {
        color: #E0C038; /* Цвет выделенного текста */
    }

    .info-block {
        width: 50%; /* Устанавливаем ширину блока на 50% */
        margin: 20px auto; /* Центрируем блок по горизонтали */
        padding: 10px; /* Добавляем отступы внутри блока */
        background-color: #4B0082; /* Цвет фона блока */
        border: 1px solid #ccc; /* Рамка вокруг блока */
        border-radius: 5px; /* Скругление углов блока */
    }

    .info-block h3 {
        text-align: center; /* Центрируем заголовок блока информации */
        color: white; /* Цвет заголовка блока информации */
    }

    .info-block p {
        color: #191970; /* Цвет текста блока информации */
        margin: 10px 0; /* Отступы между элементами списка */
        padding: 10px; /* Отступы внутри элементов списка */
        background-color: #fff; /* Цвет фона для каждого элемента */
        border-radius: 3px; /* Скругление углов элементов списка */
        border: 1px solid #eee; /* Рамка для элементов списка */
    }
}

#videoPlayer {
	display: none;
	border: none;
	background-color: rgba(0, 0, 0, 0); /* Прозрачный фон */
	}
	
#startButton,
#videoPlayer,
#message,
#soundMessage,
#cnt
 {
    margin: 20px auto; /* Центрируем блок по горизонтали */
    padding: 0; /* Обнуляем внутренние отступы */
	border: none;
}


#header {
	display: flex; /* Используем flexbox */
    align-items: center; /* Вертикальное выравнивание по центру */
   width: 50%; /* Устанавливаем ширину блока на 50% */
    margin: 20px auto; /* Центрируем блок по горизонтали */
    padding: 10px; /* Добавляем отступы внутри блока */
    background-color: rgba(0, 0, 0, 0); /* Прозрачный фон */

    border-radius: 5px; /* Скругление углов блока */
    color: #fff;
 }