/* Основные стили для навигации */
.main-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: white;
    font-family: Arial, sans-serif; /* Без засечек */
    margin-top: 3%;
}
  
/* Центрирование левой части меню */
.menu-left {
    display: flex;
    justify-content: center; /* Центрирование элементов */
    gap: 20px;
    flex-grow: 1; /* Позволяет левой части меню занимать доступное пространство */
    margin-left: 10%;
}

.menu-left a {
    text-decoration: none;
    color: black; /* Черный цвет текста */
    font-size: 2em;
    position: relative; /* Для создания отступа подчеркивания */
    transition: color 0.3s ease; /* Плавный переход при наведении */
}

.menu-left a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px; /* Отступ в 5 пикселей под словом */
    height: 2px; /* Высота линии подчеркивания */
    background-color: black; /* Цвет подчеркивания */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.menu-left a:hover::after {
    transform: scaleX(1); /* Подчеркивание появляется при наведении */
}

.menu-left a:hover {
    color: black; /* Оставляем цвет черным при наведении */
}

/* Правая часть меню */
.menu-right {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-right: 5%; /* Отступ от правого края */
}
  
/* Стили для кнопки выхода */
.logout-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.logout-button img {
    display: block;
    width: 35px;
    height: auto;
}

.logout-button span {
    color: black; /* Черный текст */
    font-size: 0.8em;
    text-align: center;
    position: absolute;
    bottom: -20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное появление */
}

.logout-button:hover span {
    opacity: 1;
    transform: translateY(0); /* Текст выдвигается снизу */
}

/* Стили для профиля и других иконок */
.profile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.profile-link img {
    display: block;
    width: 35px;
    height: auto;
    margin: 0 auto;
}

.profile-link span {
    color: black; /* Черный текст */
    font-size: 0.7em;
    text-align: center;
    position: absolute;
    bottom: -20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное появление */
}

.profile-link:hover span {
    opacity: 1;
    transform: translateY(0); /* Текст выдвигается снизу */
}


/* Адаптивные стили для уменьшения текста, изображений и расстояний на небольших экранах */
@media screen and (max-width: 768px) {
    .menu-left a {
        font-size: 2.0em; /* Уменьшаем размер текста */
    }

    .logout-button img,
    .profile-link img {
        width: 20px; /* Уменьшаем размер иконок */
    }

    .menu-left a {
        font-size:  1.2em; /* Уменьшаем текст под ссылками */
        text-align: center;
    }

    .logout-button span,
    .profile-link span {
        display: none; /* Скрываем текст под иконками */
    }

    .menu-left, .menu-right {
        gap: 10px; /* Уменьшаем расстояние между элементами */
    }
}

/* Адаптивные стили для очень маленьких экранов */
@media screen and (max-width: 480px) {

    .logout-button img, .profile-link img {
        width: 20px; /* Уменьшаем размер иконок */
    }

    .menu-left, .menu-right {
        gap: 10px; /* Уменьшаем расстояние между элементами */
    }

    .logout-button span,
    .profile-link span {
        display: none; /* Скрываем текст под иконками для самых маленьких экранов */
    }
}