/* Все элементы */
* {
    margin: 0;
    /* Убираем внешние отступы */
    padding: 0;
    /* Убираем внутренние отступы */
    box-sizing: border-box;
    /* Учитываем padding и border в размерах элементов */
    font-family: 'Courier New', Courier, monospace;
    /* Устанавливаем шрифт для всего документа */
}

/* Шапка сайта */
header {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: #ffae83;
    /* Зеленый фон шапки */
    color: rgb(75, 45, 0);
    /* Белый цвет текста */
    padding: 20px;
    /* Внутренние отступы */
    text-align: center;
    /* Центрируем текст по ширине шапки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Тень */
}

/* Содержимое шапки */
.header-content {
    max-width: 1200px;
    /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    /* Центрируем блок содержимого шапки по ширине */
}

/* Логотип шапки */
.logo {
    width: 100px;
    /* Ширина */
    height: auto;
    /* Автоматическая настройка высоты для сохранения пропорций */
    margin-bottom: 10px;
    /* Внешний отступ снизу */
}

/* Заголовок в шапке */
.header-content h1 {
    font-size: 40px;
    /* Размер шрифта */
    font-weight: bold;
    /* Жирный шрифт */
}

/* Подзаголовок в шапке */
.header-content p {
    margin: 5px 0 0;
    /* Внешний отступ сверху */
    font-size: 22px;
    /* Размер шрифта */
    color: rgb(75, 45, 0);
    /* Светлый оттенок */
}

/* Основной контент страницы */
.main-content {
    padding: 20px;
    /* Внутренние отступы */
    max-width: 1200px;
    /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    /* Центрируем блок по ширине */
}

/* Заголовок основного контента */
.main-content h2 {
    text-align: center;
    /* Центрируем текст по ширине */
    margin-bottom: 30px;
    /* Внешний отступ снизу */
    font-size: 32px;
    /* Размер шрифта */
    color: #333;
    /* Цвет текста */
    border-bottom: 3px solid #ffae83;
    /* Подчеркивание снизу */
}

/* Список игр */
.games-list {
    display: flex;
    /* Используем flexbox для расположения карточек */
    flex-direction: column;
    /* Вертикальное расположение карточек */
    gap: 20px;
    /* Расстояние между карточками */
}

/* Карточка игры */
.game-card {
    display: flex;
    /* Используем flexbox для расположения элементов внутри карточки */
    background: #fff;
    /* Белый фон карточки */
    border-radius: 10px;
    /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Тень */
    overflow: hidden;
    /* Скрываем содержимое, выходящее за пределы карточки */
    cursor: pointer;
    /* Курсор в виде указателя */
    transition: transform 300ms ease, box-shadow 300ms ease;
    /* Плавные анимации увеличения карточки и её тени */
}

/* Наведение курсором на карточку */
.game-card:hover {
    transform: translateY(-5px);
    /* Сдвиг карточки наверх */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Увеличиваем тень */
}

/* Блок с изображением игры */
.game-thumbnail {
    flex: 1;
    /* Занимает 1 часть доступного пространства */
    max-width: 40%;
    /* Максимальная ширина блока */
}

/* Изображение внутри блока */
.game-thumbnail img {
    width: 100%;
    /* Ширина изображения на 100% блока */
    height: 100%;
    /* Высота изображения на 100% блока */
    object-fit: cover;
    /* Изображение заполняет блок с сохранением пропорций */
}

/* Блок с информацией об игре */
.game-info {
    flex: 2;
    /* Занимает 2 части доступного пространства */
    padding: 20px;
    /* Внутренний отступ */
    display: flex;
    /* Используем flexbox для расположения элементов */
    flex-direction: column;
    /* Элементы располагаются вертикально */
    justify-content: center;
    /* Выравниваем содержимое по центру */
}

/* Заголовок игры */
.game-info h3 {
    font-size: 24px;
    /* Размер шрифта */
    margin-bottom: 10px;
    /* Отступ снизу */
    color: #333;
    /* Цвет текста */
}

/* Описание игры */
.game-info p {
    font-size: 16px;
    /* Размер шрифта */
    color: #777;
    /* Серый цвет текста */
    margin-bottom: 15px;
    /* Отступ снизу */
}

/* Кнопка "Играть" */
.play-button {
    display: inline-block;
    /* Делаем кнопку блочно-строчным элементом */
    padding: 10px 20px;
    /* Внутренний отступ */
    background-color: #ffae83;
    /* Зеленый фон */
    color: white;
    /* Белый цвет текста */
    text-decoration: none;
    /* Убираем подчеркивание */
    border-radius: 5px;
    /* Закругленные углы */
    transition: background-color 0.3s ease;
    /* Плавное изменение цвета фона */
    text-align: center;
    /* Выравниваем текст по центру */
}

/* Эффект при наведении на кнопку */
.play-button:hover {
    background-color: #ffae83;
    /* Темно-зеленый фон */
}

/* Футер */
footer {
    background-color: #333;
    /* Темный фон футера */
    color: white;
    /* Белый цвет текста */
    text-align: center;
    /* Выравниваем текст по центру */
    padding: 10px;
    /* Внутренний отступ */
}