<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overlay with moonlight buttons and animation</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            background: transparent; /* Прозрачный фон */
            font-family: Arial, sans-serif;
            overflow: hidden; /* Чтобы избежать прокрутки */
            position: relative;
        }

        /* Стиль для кнопок */
        .glow-on-hover {
            width: 220px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: rgba(17, 17, 17, 0.8); /* Полупрозрачный фон */
            cursor: pointer;
            position: absolute;
            z-index: 20; /* Высокий z-index для кнопок */
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
        }

        .glow-on-hover:before {
            content: '';
            background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
            position: absolute;
            top: -2px;
            left: -2px;
            background-size: 400%;
            z-index: -1;
            filter: blur(5px);
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            animation: glowing 20s linear infinite;
            border-radius: 10px;
            opacity: 1; /* Постоянное свечение */
        }

        .glow-on-hover:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(17, 17, 17, 0.8); /* Полупрозрачный фон */
            left: 0;
            top: 0;
            border-radius: 10px;
        }

        @keyframes glowing {
            0% { background-position: 0 0; }
            50% { background-position: 400% 0; }
            100% { background-position: 0 0; }
        }

        .datetime {
            color: yellow;
        }

        /* Стиль для текста с лунным свечением */
        .moon-glow {
            color: #e0f7fa; /* Мягкий голубой цвет */
            text-shadow: 0 0 5px #80deea, 0 0 10px #80deea, 0 0 20px #80deea, 0 0 40px #80deea;
        }

        /* Стиль для изображения внутри кнопки */
        .logo-img {
            width: 40px; /* Размер изображения */
            height: 40px;
            margin-right: 10px; /* Отступ между изображением и текстом */
        }

        /* Стиль для изображения Mana.png */
        .mana-img {
            width: 30px; /* Размер изображения */
            height: 30px;
            margin-left: 5px; /* Отступ между текстом и изображением */
        }

        /* Стиль для анимированного Elexir.gif */
        .elexir-img {
            width: 30px; /* Размер изображения */
            height: 30px;
            margin-left: 5px; /* Отступ между текстом и изображением */
        }

        /* Стиль для анимированного Time 5 minuts.gif */
        .time-img {
            width: 30px; /* Размер изображения */
            height: 30px;
            margin-right: 10px; /* Отступ между изображением и текстом */
        }

        /* Стиль для изображения Trover.png */
        .trover-img {
            width: 30px; /* Размер изображения */
            height: 30px;
            margin-left: 10px; /* Отступ между текстом и изображением */
        }

        /* Позиционирование верхних кнопок */
        #button1 {
            top: 20px;
            right: 20px;
        }

        #button2 {
            top: 20px;
            left: 20px;
        }

        /* Позиционирование нижних кнопок */
        #button3 {
            bottom: 20px;
            left: 20px;
        }

        #button4 {
            bottom: 20px;
            right: 20px;
        }

        /* Позиционирование центральной нижней кнопки */
        #button5 {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%); /* Центрирование по горизонтали */
        }

        /* Анимированные градиентные границы */
        .border-gradient {
            position: absolute;
            background: linear-gradient(90deg, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%);
            background-size: 400% 100%;
            animation: gradient-move 5s linear infinite;
            z-index: 15; /* z-index для границ */
        }

        /* Верхняя граница */
        .border-top {
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
        }

        /* Правая граница */
        .border-right {
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%);
            background-size: 100% 400%;
            animation: gradient-move-vertical 5s linear infinite;
        }

        /* Нижняя граница */
        .border-bottom {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
        }

        /* Левая граница */
        .border-left {
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%);
            background-size: 100% 400%;
            animation: gradient-move-vertical 5s linear infinite;
        }

        /* Анимация для горизонтальных границ */
        @keyframes gradient-move {
            0% { background-position: 0% 0%; }
            100% { background-position: 400% 0%; }
        }

        /* Анимация для вертикальных границ */
        @keyframes gradient-move-vertical {
            0% { background-position: 0% 0%; }
            100% { background-position: 0% 400%; }
        }

        /* Стиль для видео */
        #grim-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 2560px; /* Ширина видео */
            height: 1440px; /* Высота видео */
            z-index: 5; /* Низкий z-index для видео */
            display: none; /* Скрыто по умолчанию */
            object-fit: cover; /* Чтобы видео заполнило весь контейнер */
        }
    </style>
</head>
<body>
    <!-- Видео -->
    <video id="grim-video" controls loop>
        <source src="Grim.mp4" type="video/mp4">
        Ваш браузер не поддерживает видео.
    </video>

    <!-- Верхние кнопки -->
    <button id="button1" class="glow-on-hover" type="button">
        <span class="datetime" id="datetime"></span>
        <img src="Trover.png" alt="Trover" class="trover-img">
    </button>

    <button id="button2" class="glow-on-hover" type="button">
        <img src="logo.png" alt="Логотип" class="logo-img">
        <span class="moon-glow">Stream _CEPBEP_</span>
    </button>

    <!-- Нижние кнопки -->
    <button id="button3" class="glow-on-hover" type="button">
        <span class="moon-glow">Ману</span>
        <img src="Mana.png" alt="Мана" class="mana-img">
        <span class="moon-glow">в ракету 🚀</span>
    </button>

    <button id="button4" class="glow-on-hover" type="button">
        <span class="moon-glow">Элексир</span>
        <img src="Elexir.gif" alt="Элексир" class="elexir-img">
        <span class="moon-glow">в Арену 🎉</span>
    </button>

    <!-- Центральная нижняя кнопка -->
    <button id="button5" class="glow-on-hover" type="button">
        <span class="moon-glow">Обнови страничку жми F5</span>
    </button>

    <!-- Анимированные градиентные границы -->
    <div class="border-gradient border-top"></div>
    <div class="border-gradient border-right"></div>
    <div class="border-gradient border-bottom"></div>
    <div class="border-gradient border-left"></div>

    <script>
        // Функция для обновления даты и времени
        function updateDateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit', 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit' 
            };
            const formattedDate = now.toLocaleDateString('ru-RU', options);
            document.getElementById('datetime').textContent = formattedDate;
        }

        // Запуск видео
        function playVideo() {
            const video = document.getElementById('grim-video');
            video.style.display = 'block'; // Показываем видео
            video.play(); // Запускаем воспроизведение
        }

        // Запуск видео через 0 секунд после загрузки страницы
        setTimeout(playVideo, 0);

        // Обновление даты и времени каждую секунду
        setInterval(updateDateTime, 1000);
        updateDateTime(); // Первоначальный вызов для отображения даты и времени
    </script>
</body>
</html>