/**
 * Медиа-запросы для адаптивного дизайна навигационных элементов веб-страницы.
 */

/**
 * Медиа-запросы для экранов с максимальной шириной 1000px.
 * Уменьшает размер шрифта ссылок в навигационных элементах для улучшения читаемости на устройствах среднего размера.
 */
@media screen and (max-width: 1000px) {
    .nav-item>a {
        font-size: 0.9rem;
        /* Уменьшенный размер шрифта для ссылок */
    }
}

/**
   * Медиа-запросы для экранов с максимальной шириной 500px.
   * Изменяет отображение вкладок и высоту навигационных элементов для оптимизации интерфейса на мобильных устройствах.
   */
@media screen and (max-width: 500px) {
    #tabs {
        display: block;
        /* Блочное отображение вкладок */
        text-align: center;
        /* Выравнивание текста по центру */
    }

    .nav-item {
        height: 5vh;
        /* Высота навигационных элементов, зависящая от высоты видимой области */
    }
}