/*
 * Шрифты: Чтобы использовать 'Roboto Mono' и 'Montserrat' (как в вашем оригинале),
 * убедитесь, что они подключены в вашем index.html:
 * <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
 * В текущем HTML использовался 'Orbitron', можете заменить его на 'Montserrat' или 'Roboto Mono'.
 */

:root {
    /* Цвета взяты из предоставленного вами CSS */
    --main-bg-color: #0d1117; /* Темный фон */
    --neon-green: #7ee787;   /* Основной неоновый цвет (как у цифр) */
    --neon-blue: #58a6ff;    /* Дополнительный неоновый цвет (как у заголовка) */
    --text-color: #c9d1d9;   /* Базовый цвет текста */
    --font-main: 'Montserrat', sans-serif;
    --font-code: 'Roboto Mono', monospace;
}

/* Общий фон и шрифт */
body {
    font-family: var(--font-main); 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 100vw;
    margin: 0;
    background-color: var(--main-bg-color); /* Темный фон, как в оригинале */
    color: var(--text-color);
}

/* Эффект свечения на заднем плане (взято из вашего CSS) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Используем градиент с основным неоновым цветом */
    background: radial-gradient(circle, rgba(126, 231, 135, 0.1) 0%, rgba(13, 17, 23, 0.5) 70%);
    animation: radialPulse 10s infinite alternate;
}
@keyframes radialPulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Оболочка для большой картинки */
.image-wrapper {
    width: 95vw; 
    height: 90vh; 
    /* Убираем черную тень и заменяем на легкое неоновое свечение */
    box-shadow: 0 0 15px rgba(126, 231, 135, 0.2); 
    border-radius: 15px;
    overflow: hidden;
    position: relative; /* Чтобы быть уверенным, что он поверх body::before */
    z-index: 1;
}

/* Место для изображения */
.image-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center;
    position: relative; 
    display: flex;
    align-items: flex-end; 
    justify-content: center; 
}

/* Контейнер для кнопки */
.control-overlay {
    width: 100%;
    padding: 20px 0; 
    text-align: center;
    /* Полупрозрачный фон соответствует темноте фона */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(5px); 
    /* Неоновая линия (используем неоново-зеленый цвет) */
    border-top: 1px solid var(--neon-green); 
}

/* Кнопка "Обновить" */
#refresh-button {
    background: none;
    color: var(--neon-green);
    border: 1px solid var(--neon-green);
    padding: 12px 30px;
    text-transform: uppercase;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Неоновая обводка кнопки с основным зеленым свечением */
    box-shadow: 0 0 8px var(--neon-green), 0 0 15px rgba(126, 231, 135, 0.5);
    font-family: var(--font-code); /* Используем моноширинный шрифт для "техно"-стиля */
}

#refresh-button:hover {
    background-color: var(--neon-green);
    color: var(--main-bg-color); /* Текст становится темным на светящемся фоне */
    box-shadow: none;
}

/* * Стили для кнопки "На Главную" (те, что были встроены в HTML-тег <a style="..."> 
 * теперь могут быть заменены на классовые, но для независимости лучше оставить их там.
 * Если вы хотите, чтобы они также были неоновыми, убедитесь, что цвет там #7ee787.
 * * ВАЖНО: Ниже я предоставляю обновленные ИНЛАЙН-СТИЛИ для кнопки "На Главную" 
 * с использованием новых цветов, на случай, если вы решите их обновить.
 */