body {
    margin: 0; /* Убираем отступы по умолчанию */
    height: 100vh; /* Высота на весь экран */
    overflow: hidden; /* Скрываем переполнение */
    background-image: url('background.gif');
    background-size: cover;
    background-position: center;
    animation: move 35s linear infinite;
}

.background {
    position: relative;
    height: 100%; /* Занимает всю высоту родителя (body) */
}

.rainbowText {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 10px;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    animation: hue 10s infinite linear;
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px; /* Увеличиваем отступы для лучшего восприятия */
    border: 4px solid transparent; /* Убираем цвет границы, чтобы использовать только тень */
    border-radius: 15px; /* Увеличиваем радиус границы */
    background-color: rgba(30, 30, 30, 0.8);
    z-index: 1;
    width: auto; /* Убираем фиксированную ширину */
    max-width: 95%; /* Увеличиваем максимальную ширину */
    text-align: center; /* Центрируем текст */
    box-shadow: 0 0 15px rgba(125, 205, 214, 0.8), 0 0 30px rgba(125, 205, 214, 0.6); /* Светящийся эффект */
}

h1 {
    margin: 0;
    color: #7DCDD6;
    font-size: 1.2em;
}

p {
    color: #e0e0e0;
    margin: 5px 0;
    font-size: 0.9em;
}

.cosmic {
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: underline;
    background-image: linear-gradient(90deg, #ff0080, #ff8c00, #00ff8c, #00bfff, #8000ff, #ff0080);
    background-size: 300%; /* Увеличиваем размер фона для эффекта переливания */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cosmic-hue 10s infinite linear; /* Увеличиваем время анимации для плавности */
}

@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

@keyframes cosmic-hue {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%; /* Возвращаемся к начальной позиции для плавного перехода */
    }
}

@keyframes move {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5em; /* Увеличиваем размер заголовка на мобильных */
    }

    p {
        font-size: 1em; /* Увеличиваем размер текста на мобильных */
    }

    .text-container {
        padding: 10px; /* Уменьшаем отступы в контейнере текста */
    }

    .rainbowText {
        font-size: 1.5em; /* Увеличиваем размер текста для эффекта радуги */
        top: 5px; /* Уменьшаем отступ сверху */