/* Общие стили для всего сайта */
body {
    font-family: Arial, sans-serif; /* Выбираем простой и читаемый шрифт */
    line-height: 1.6; /* Увеличиваем расстояние между строками для удобства чтения */
    margin: 0; /* Убираем стандартные отступы браузера */
    background-color: #f4f4f4; /* Светло-серый фон */
    color: #333; /* Темно-серый цвет текста */
    scroll-behavior: smooth; /* Делаем прокрутку страницы плавной */
}

/* Стили для заголовков */
header {
    background: #333; /* Темный фон для шапки сайта */
    color: #fff; /* Белый текст */
    text-align: center; /* Выравниваем текст по центру */
    padding: 2rem 0; /* Добавляем внутренние отступы */
}

header h1 {
    margin: 0; /* Убираем отступы у заголовка */
    font-size: 2.5rem; /* Увеличиваем размер заголовка */
}

/* Стили для навигационного меню */
nav {
    background: #444; /* Чуть светлее фон, чем у шапки */
    text-align: center;
    position: sticky; /* Меню будет "прилипать" к верху страницы при прокрутке */
    top: 0;
    z-index: 1000; /* Гарантируем, что меню будет всегда сверху */
}

nav ul {
    list-style: none; /* Убираем маркеры у списка */
    padding: 0;
    margin: 0;
    display: flex; /* Выстраиваем элементы в одну строку */
    flex-wrap: wrap; /* Если не помещаются, переносим на новую строку */
    justify-content: center; /* Равномерно распределяем элементы */
}

nav ul li a {
    display: block; /* Делаем ссылки блочными, чтобы они занимали всю ширину */
    color: #fff;
    text-decoration: none; /* Убираем подчеркивание */
    padding: 1rem;
    transition: background-color 0.3s ease; /* Плавный переход цвета при наведении */
}

nav ul li a:hover {
    background-color: #555; /* Меняем цвет фона при наведении */
}

/* Стили для секций с информацией о животных */
main {
    padding: 2rem;
    max-width: 1000px; /* Ограничиваем ширину основного контента */
    margin: auto; /* Выравниваем по центру */
}

section {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px; /* Скругляем углы блока */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Добавляем легкую тень */
}

section h2 {
    color: #3e7f3c; /* Делаем заголовок секции зеленого цвета */
    border-bottom: 2px solid #3e7f3c; /* Добавляем зеленую линию под заголовком */
    padding-bottom: 0.5rem;
}

section img {
    max-width: 100%; /* Картинка будет подстраиваться под ширину блока */
    height: auto;
    display: block; /* Убираем лишние отступы */
    margin-bottom: 1rem;
    border-radius: 8px; /* Скругляем углы картинки */
}

/* Стили для адаптивности на маленьких экранах */
@media (max-width: 768px) {
    nav ul li a {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
}
/* Стили для подвала */
footer {
    text-align: center; /* Выравниваем текст по центру */
    padding: 1rem 0; /* Добавляем внутренние отступы */
    background: #333; /* Темный фон, как в шапке сайта */
    color: #fff; /* Белый текст */
    margin-top: 2rem; /* Отступ сверху, чтобы отделить от основного контента */
}