html, body {
    height: 100%; /* Устанавливаем высоту для html и body */
}

body {
    display: flex; /* Используем flexbox для управления расположением */
    flex-direction: column; /* Устанавливаем вертикальное направление */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    flex: 1; /* Позволяет контейнеру занимать оставшееся пространство */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0;
}
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}


h1 {
    font-size: 24px; /* Default font size */
}

@media (min-width: 600px) {
    h1 {
        font-size: 3vw;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2vw;
    }
}
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 1rem;
}

.episode-info {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.episode-info h1 {
    color: #333;
    text-align: center; /* Добавлено для выравнивания заголовка по центру */
}

.episode-info img {
    max-width: 100%;
    height: auto;
}

.episode-details {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.episode-details h3 {
    color: #333;
}

.card-img-top {
            height: 350px;
            width: 100%;
            object-fit: cover;
            text-align: center;
            display: block;
        }
.blog-post-title {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.loader {
        border: 8px solid #f3f3f3; /* Светлый фон */
        border-top: 8px solid #3498db; /* Цвет верхней части */
        border-radius: 50%;
        width: 50px; /* Ширина загрузчика */
        height: 50px; /* Высота загрузчика */
        animation: spin 1s linear infinite; /* Анимация вращения */
        position: absolute; /* Позиционирование */
        top: 50%; /* Центрирование по вертикали */
        left: 50%; /* Центрирование по горизонтали */
        margin: -25px 0 0 -25px; /* Смещение для центрирования */
    }

@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    width: 100%;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    width: 100%;
}
.iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.iframe-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Медиа-запрос для экранов с высотой меньше 400px */
@media (min-height: 400px) {
    .iframe-container {
        height: 400px; /* Устанавливаем фиксированную высоту для контейнера */
    }
    
    .iframe-container iframe {
        height: 400px; /* Устанавливаем фиксированную высоту для iframe */
    }
}



/* Медиа-запрос для экранов с высотой меньше 400px */
@media (min-height: 1100px) {
    .iframe-container {
        height: 100%; /* Устанавливаем фиксированную высоту для контейнера */
    }
    
    .iframe-container iframe {
        height: 100%; /* Устанавливаем фиксированную высоту для iframe */
    }
}


.episode-buttons {
    margin: 1rem 0;
    text-align: center;
    padding: 1rem 0;
    margin-top: 10px; /* Отступ сверху */
    margin-bottom: 10px; /* Отступ снизу */
}

.episode-buttons .btn {
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 10px;
    margin-top: 10px; /* Отступ сверху */
    margin-bottom: 10px; /* Отступ снизу */
}

.episode-buttons .btn:hover {
    background-color: #555;
    
}
.episode-buttons .btn:last-child {
    margin-right: 0; /* Убирает отступ у последней кнопки */
}