body {
    background: radial-gradient(
        circle at top,
        #6ff5ff 0%,
        #00bfcf 60%,
        #0099a8 100%
    );
}

/* ===== R-TYPE Neon / Modern H1 ===== */

/* CSS переменные для удобной настройки цветов градиента и свечения */
:root {
    --rtype-light: #9ffcff;  /* светлый неоновый */
    --rtype-main:  #45e6e6;  /* основной бирюзовый */
    --rtype-dark:  #00bfcf;  /* холодный тёмный */
}

h1 {
    font-family: 'Russo One', sans-serif; /* современный геометрический шрифт */
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;           /* все буквы заглавные для tech-стиля */
    letter-spacing: 0.08em;              /* чуть больше воздуха между буквами */

    /* ===== Градиент ===== */
    background: linear-gradient(
        90deg,
        var(--rtype-light),
        var(--rtype-main),
        var(--rtype-dark)
    );
    background-size: 200% 100%;           /* для анимации shimmer */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    /* ===== Обводка ===== */
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.6); /* чуть тоньше, мягче */

    /* ===== Свечение / текстовые тени ===== */
    text-shadow:
        0 0 4px var(--rtype-main),    /* небольшое свечение основного цвета */
        0 0 12px var(--rtype-dark),   /* мягкое расширенное свечение */
        0 4px 6px rgba(0,0,0,0.2);   /* лёгкая глубина от тени */

    /* ===== Анимация градиента (subtle shimmer) ===== */
    animation: shimmer 5s ease-in-out infinite;

    /* ===== Плавный hover эффект ===== */
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* ===== Ключевые кадры анимации градиента ===== */
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }   /* начальная и конечная позиция */
    50%       { background-position: 100% 50%; } /* середина анимации */
}

/* ===== Hover эффект для интерактива ===== */
h1:hover {
    transform: scale(1.03);  /* лёгкое увеличение */
    text-shadow:
        0 0 6px var(--rtype-light),   /* усиление свечения при наведении */
        0 0 16px var(--rtype-main),
        0 6px 8px rgba(0,0,0,0.25);
}

/* ===== Контент ===== */
main.content {
    text-align: center;
    margin: 40px 20px;
    font-family: 'Arial', sans-serif;
}

main.content .text {
    font-size: 1.6rem;
    color: var(--rtype-light);
    text-shadow: 0 0 4px var(--rtype-main), 0 0 8px var(--rtype-dark);
    line-height: 1.6;
}