body {
    background: url('BK.jpg') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    font-family: 'Courier New', monospace;
    color: #fff;
}

/* Шапка */
.main-header {
    background-color: rgba(255, 220, 0, 0.7);
    padding: 30px;
    text-align: center;
    border-bottom: 6px solid #222;
}

/* Логотип в один рядок */
.logo-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
	
}

.welcome-text {
    font-size: 150px;
    color: #222;
    font-weight: 900;
    text-transform: uppercase;
}

.logo-image {
    height: 250px; /* Регулюй висоту малюнка тут */
    width: auto;
}

/* Блок директора */
.ceo-welcome {
    background: rgba(0, 0, 0, 0.8);
    max-width: 900px;
    margin: 0 auto;
    padding: 25px;
    border: 3px solid #ffdc00;
}

.ceo-welcome h2 {
    color: #ffdc00;
    letter-spacing: 2px;
}

/* Розташування блоків */
.archive-container {
	position: relative;  /* ЦЕ ВАЖЛИВО: робить цей блок "якорем" для картинок */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Відступ між верхнім та нижнім рядом */
    padding: 50px 20px;
}
.row {
    display: flex;
    flex-direction: row; /* Блоки в ряд */
    justify-content: center;
    gap: 40px; /* Відступ між картками в одному ряду */
    flex-wrap: wrap; /* Для мобільних пристроїв */
	padding-bottom: 20px;
}

/* Картки */
.archive-card {
	width: 300px;       /* Фіксована ширина картки */
    background: #111;
    text-decoration: none;
    color: white;
    border: 4px solid #ffdc00;
    transition: 0.3s;
    width: 280px;
}

 
.archive-card:hover {
    transform: scale(1.05);
    border-color: #cc0000;
}

.img-wrapper {
    width: 280px;
    height: 280px;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    background: #222;
	text-transform: uppercase;
}
/* Контейнер футера */
.vhs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px; /* Відступ від блоків зверху */
    padding-bottom: 40px;
}

/* СТИЛЬ ДЛЯ ТЕКСТУ "ПЕРЕД ПОЧАТКОМ..." (ВИДНО ЗАВЖДИ) */
.vhs-static-text {
    background-color: #ffcd00;
    color: #000000;
    border: 3px solid #ffdc00; /* Жовта рамка під стиль сайту */
    padding: 12px 25px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 60px; /* Відступ від тексту до касети */
    white-space: nowrap;
    box-shadow: 0 10xp 25px rgba(0, 0, 0, 0.5);
}
.warning-title {
    color: #ff0000;           /* Яскраво-червоний колір */
    font-size: 2.2rem;         /* Ще більший розмір для акценту */
    margin-bottom: 10px;       /* Відступ від слова до основної фрази */
    display: block;            /* Щоб слово було окремим рядком */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Легка тінь для чіткості */
	text-align: center;
}

/* КОНТЕЙНЕР КАСЕТИ */
.vhs-tape {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.vhs-img {
    width: 180px; /* Розмір касети */
    height: auto;
    transition: transform 0.3s ease;
}

.vhs-tape:hover .vhs-img {
    transform: scale(1.1);
}

/* ПІДКАЗКА (З'ЯВЛЯЄТЬСЯ ПРИ НАВЕДЕННІ) */
.tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 110%; /* З’явиться над касетою */
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: white;
    border: 3px solid #ff0000; /* Червона рамка для підказки */
    padding: 10px 20px;
    white-space: nowrap;
    font-size: 1.1rem;
    z-index: 10;
}

.vhs-tape:hover .tooltip {
    visibility: visible;
}
/* Загальні налаштування для декору */
.fixed-decor {
    position: absolute;
    bottom: -1000px;            /* Розміщуємо по центру висоти */
    transform: translateY(-50%); 
    height: auto;       /* Обмежуємо висоту до 70% екрана, щоб вони не вилазили за межі */
    width: auto;       /* Налаштуй розмір під свої картинки */
    z-index: 100;        /* Поверх фону */
    pointer-events: none; /* Щоб крізь картинки можна було клікати на сайт */
    opacity: 1 !important;       /* Легка прозорість для атмосферності */
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}
/* Повноекранний чорний фон */
.vhs-fullscreen-overlay {
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* Відео на весь екран без можливості кліку */
.vhs-fullscreen-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Розтягує відео без чорних смуг по боках */
    pointer-events: none; /* Вимикає кліки мишкою: не можна натиснути паузу */
}

/* Клас, який ховає прокрутку сайту, коли відео активне */
.lock-scroll {
    overflow: hidden !important;
}

/* Главный контейнер (убедись, что этот класс написан так же, как у твоих карточек) */
.your-content-container2 {
  position: relative; 
  max-width: 800px; /* Если твои карточки шире/уже, поставь их точную ширину */
  margin: 0 auto;
}

/* Общие стили для всех оберток */
.fixed-decor {
  position: absolute;
  top: -150px;          /* Выравниваем обе картинки по одной верхней линии */
  z-index: 5;
  pointer-events: none;
}
.vhs-fullscreen-overlay {
    /* ... остальные настройки (position, top, left, background) оставьте как были ... */
    display: flex;
    justify-content: center;
    align-items: center;
}

#exitVideo {
    width: 98vw !important;  /* !important перекроет любые другие конфликтующие стили */
    max-height: 98vh !important;
    object-fit: contain;
    display: block;
}
/* Ограничиваем размер самих картинок внутри дивов */
.fixed-decor img {
  width: 650px;        /* ТУТ МЕНЯЙ РАЗМЕР: уменьшай до 250px или 220px, если они всё еще большие */
  height: auto;
  display: block;
}

/* Ліва рука (CatNap / Кисси) */
.left-hand {
  right: 100%;         /* Становится четко слева от карточек */
  margin-right: -140px; 
  width: 600px;  /* Ширина 200px, висота підлаштується сама */
  height: auto;/* Отрицательный маргин чуть-чуть пододвинет их К карточкам. 
                          Если будут слишком близко — сделай margin-right: 10px; */
}

/* Права рука (Хагги Вагги) */
.right-hand {
  left: 100%;          /* Становится четко справа от карточек */
  margin-left: -140px;  /* Чуть-чуть пододвигаем ближе к карточкам */
}

/* Планшеты и телефоны: отключаем, чтобы не ломали мобильный вид */
@media (max-width: 1400px) {
  .fixed-decor {
    display: none !important;
  }
}

@media (max-width: 1400px) {
    .side-decor {
        width: 15vw;     /* Зменшуємо розмір, якщо екран вузький */
        height: auto;
    }
}
/* Адаптація: на маленьких екранах (телефонах) прибираємо руки, щоб не закривали текст */
@media (max-width: 1200px) {
    .fixed-decor {
        display: none;
    }
}

.site-footer {
    background-color: #000000;
    color: white;
    padding: 80px 20px; /* Збільшив відступи для солідності */
    margin-top: 50px;
    font-family: 'Courier New', Courier, monospace;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрує все горизонтально */
    max-width: 1200px;
    margin: 0 auto;
}

/* Напис та велике зображення */
.footer-main-info {
    display: flex;             /* Вмикаємо Flexbox */
    flex-direction: column;    /* Вирівнюємо елементи у стовпчик */
    align-items: center;       /* Центруємо елементи по горизонталі */
    justify-content: center;   /* Центруємо елементи по вертикалі (за потреби) */
    gap: 10px;                 /* Відстань між картинкою та текстом */
}

.footer-text {
	display: flex;             /* Вмикаємо Flexbox */
    flex-direction: column;
	align-items: center;
    font-size: 4rem; /* Зробив ще трохи більшим */
    letter-spacing: 10px;
    margin-bottom: 25px;
    font-weight: 900;
}
/* Базовий стиль кнопки */
.footer-text1 {
	margin-left: 630px;
    background: none;      /* Прозорий фон */
    border: none;          /* Без рамки */
    cursor: pointer;       /* Курсор у вигляді вказівника */
    padding: 10px 20px;    /* Відступи для зручності натискання */
    font-size: 50px;       /* Розмір шрифту */
    color: #ffffff;        /* Білий колір тексту */
    transition: all 0.3s ease; /* Плавна зміна ефектів */
    text-transform: uppercase; /* Текст великими літерами */
    font-weight: bold;     /* Жирний шрифт */
}

/* Ефект при наведенні (Hover) */
.footer-text1:hover {
    color: #ff0000;        /* Зміна кольору тексту при наведенні (наприклад, на червоний) */
    transform: scale(1.05); /* Легке збільшення кнопки */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Додаємо легке світіння */
}

/* Ефект при натисканні (Active) */
.footer-text1:active {
    transform: scale(0.95); /* Кнопка трохи "просідає" при кліку */
}

.footer-logo {
    width: 600px; /* ЗБІЛЬШЕНО: тепер логотип значно масивніший */
    height: auto;
}

/* Ряд з посиланнями */
.footer-links-row {
    display: flex;
    justify-content: center; /* Рівняє посилання по центру горизонтально */
    gap: 30px;               /* Відстань між посиланнями */
    flex-wrap: wrap;
    width: 100%
}


/* Посилання за замовчуванням */
.footer-link-item a {
    color: #ffd700 !important;
    text-decoration: none !important;
}

/* Відвідане посилання (буде оранжевим до оновлення сторінки) */
.footer-link-item a:visited {
    color: #ff8c00 !important;
}

/* При наведенні */
.footer-link-item a:hover {
    color: #ffffff !important;
}
/* Адаптація для маленьких екранів */
@media (max-width: 768px) {
    .footer-logo {
        width: 80%; /* На телефонах лого звужується */
    }
    .footer-links-row {
        flex-direction: column; /* На телефонах посилання знову стають у стовпчик */
        gap: 15px;
        text-align: center;
    }
    .footer-text {
        font-size: 2.5rem;
    }
}
.audio-control {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#audio-btn {
    background: rgba(0, 0, 0, 0.7);
    color: #ffd700;
    border: 2px solid #ffd700;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transition: 0.3s;
}

#audio-btn:hover {
    transform: scale(1.1);
    background: #ffd700;
    color: #000;
}
.factory-btn {
    display: block;
    margin: 30px auto;
    padding: 15px 40px;
    background-color: #ffd700; /* Жовтий як логотип */
    color: #000;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1.2rem;
    border: 3px solid #b8860b;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.factory-btn:hover {
    background-color: #ff0000; /* Стає червоною при наведенні */
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px #ff0000;
}

.factory-btn:active {
    transform: scale(0.95);
}

.answer{
	display: flex;
	text-align: center;
	margin-left: 280px;
}