---

body {
    background-color: #1f1f1f;          /* добавлен # для корректного цвета */
    background-image: url("../image/cat.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 100px;                /* отступ, чтобы контент не залезал под абсолютную шапку */
    margin: 0;                         /* убираем возможные браузерные отступы */
}

/* Шапка */
.hat {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 70px;
    display: flex;                     /* выравниваем логотип и навигацию в строку */
    align-items: center;               /* вертикальное центрирование */
    justify-content: space-between;    /* логотип слева, навигация справа */
    padding: 0 20px;                   /* небольшие боковые отступы */
    box-sizing: border-box;
    z-index: 10;                       /* шапка поверх контента, если нужно */
}

/* Логотип – без гигантских смещений */
.logo {
    height: 50px;                      /* или подгони под реальный размер */
    width: auto;
    position: static;                  /* отменяет наследуемый absolute, если был */
}

/* Навигация – убираем принудительный левый сдвиг */
nav {
    display: flex;
    gap: 15px;                         /* расстояние между ссылками */
    flex-wrap: wrap;                   /* чтобы ссылки не вылезали на маленьких экранах */
    justify-content: flex-end;
}

/* Ссылки */
a {
    color: black;
    font-size: 20px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

a:hover {
    animation: UpScale 0.5s forwards;
}

@keyframes UpScale {
    0% {
        transform: scale(1);
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1.03);
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
    }
}

/* --- Контейнер с фильмами --- */
.films_block {                  /* исправлен селектор (точка) */
    margin-top: 30px;           /* дополнительный отступ от шапки, если нужно */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;        /* центрируем карточки */
    gap: 25px;
}

/* Карточка фильма */
.film {
    width: 650px;
    max-width: 90%;             /* чтобы на узких экранах не вылезало */
    padding: 20px;
    background-color: #3a65a6;
    border-radius: 25px;
    color: white;               /* белый текст на синем фоне – так читаемее */
    position: relative;         /* если понадобятся внутренние абсолютные элементы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Заголовок фильма – теперь в потоке */
.film h2 {
    color: #ffffff;
    font-size: 26px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin: 0 0 10px 0;
    text-align: center;
}

/* Описание фильма – в потоке */
.film p {
    color: #e0e0e0;
    font-size: 18px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    line-height: 1.5;
    margin: 0;
}

/* --- Элементы, которые ты использовал на других страницах (panel, cat) --- */
/* оставляем, но они не должны портить главную */
.panel {
    position: absolute;
    width: 400px;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 150px;
    left: 100px;
    animation: Pulse 2s ease infinite;
}

.cat {
    position: absolute;
    width: 500px;
    height: 800px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 150px;
    left: 800px;
}

@keyframes Pulse {
    0% {
        transform: scale(1);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
}

.film-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    display: block;
}