/* Файл: styles.css */
/* Этот файл содержит стили для страницы. Он делает всё отзывчивым для мобильных устройств (используем flexbox и media queries). */
/* Фон страницы - ваша PNG-картинка. Она растягивается на весь экран. */

body {
    margin: 0; /* Убираем отступы по умолчанию */
    padding: 0; /* Убираем padding */
    font-family: Arial, sans-serif; /* Шрифт по умолчанию */
    background-image: url('images/background.png'); /* Фон - ваша PNG-картинка из папки images */
    background-size: cover; /* Растягиваем фон на весь экран, сохраняя пропорции */
    background-position: center; /* Центрируем фон */
    background-repeat: no-repeat; /* Не повторяем фон */
    height: 100vh; /* Высота на весь экран */
    display: flex; /* Flexbox для центрирования контента */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    color: white; /* Белый текст для видимости на фоне */
    text-shadow: 2px 2px 4px black; /* Тень текста для лучшей читаемости на фоне */
}

.container {
    text-align: center; /* Центрируем текст внутри контейнера */
    padding: 20px; /* Отступы внутри контейнера */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный чёрный фон для контейнера, чтобы текст был читаем на ярком фоне */
    border-radius: 10px; /* Закруглённые углы */
    max-width: 90%; /* Максимальная ширина для мобильных - 90% экрана */
}

.logo {
    position: absolute; /* Абсолютное позиционирование для логотипа справа вверху */
    top: 20px; /* Отступ сверху */
    right: 20px; /* Отступ справа */
    font-size: 2em; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #00ff00; /* Зелёный цвет для неона */
    text-shadow: /* Неоновый эффект: несколько слоёв тени для свечения */
        0 0 5px #00ff00,
        0 0 10px #00ff00,
        0 0 20px #00ff00,
        0 0 40px #00ff00,
        0 0 80px #00ff00;
    animation: neon-glow 1.5s ease-in-out infinite alternate; /* Анимация для мигания/свечения */
}

/* Анимация для неонового свечения */
@keyframes neon-glow {
    from {
        text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00;
    }
    to {
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 80px #00ff00;
    }
}

h1 {
    font-size: 2em; /* Размер заголовка */
    margin-bottom: 20px; /* Отступ снизу */
}

.buttons {
    display: flex; /* Flexbox для кнопок в ряд */
    justify-content: center; /* Центрируем кнопки */
    gap: 20px; /* Расстояние между кнопками */
}

.button {
    padding: 10px 20px; /* Отступы внутри кнопки */
    font-size: 1.5em; /* Размер текста */
    text-decoration: none; /* Убираем подчёркивание для ссылок */
    color: white; /* Белый текст */
    border-radius: 5px; /* Закруглённые углы */
    transition: background-color 0.3s; /* Плавный переход цвета */
}

.yes {
    background-color: green; /* Зелёный для "Да" */
}

.yes:hover {
    background-color: darkgreen; /* Тёмный зелёный при наведении */
}

.no {
    background-color: red; /* Красный для "Нет" */
}

.no:hover {
    background-color: darkred; /* Тёмный красный при наведении */
}

/* Media query для мобильных устройств (экраны меньше 600px) - делает текст и кнопки больше для удобства */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5em; /* Уменьшаем заголовок на маленьких экранах */
    }
    
    .button {
        font-size: 1.2em; /* Уменьшаем кнопки */
        padding: 8px 16px; /* Меньшие отступы */
    }
    
    .logo {
        font-size: 1.5em; /* Уменьшаем логотип */
        top: 10px; /* Ближе к краю */
        right: 10px;
    }
}