.menu {
    position: fixed;
    top: 50%; /* Центруем относительно высоты экрана */
    left: 0;
    width: 25%; /* Занимает 25% ширины экрана */
    height: 50%; /* Занимает 50% высоты экрана */
    z-index: 1001; /* Устанавливаем высокий z-index, чтобы меню было выше header и footer */
    transform: translateY(-60%); /* Сдвигаем вверх на половину высоты, чтобы отцентровать */
    padding: 0px; /* Внутренние отступы для элементов */
    box-sizing: border-box; /* Учитываем padding при расчете размеров */
    font-family: var(--menu-font-family); /* Применяем шрифт меню */
}

.menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Равномерное распределение элементов */
    height: 100%; /* Растягиваем список по всей высоте меню */
}

.menu nav ul li {
    text-align: center; /* Центрируем текст пунктов */
}

.menu nav ul li a {
    color: var(--menu-text-color);
    text-decoration: none;
    font-size: 32px; /* Размер шрифта по умолчанию */
    font-weight: normal; /* Всегда normal */
    display: block;
    padding: 2px 5px;
    transition: transform 0.3s, color 0.3s; /* Плавный переход при наведении */
}

.menu nav ul li a:hover {
    transform: scale(1.2); /* Увеличиваем текст при наведении */
    color: var(--text-color); /* Меняем цвет текста при наведении */
}

.menu nav ul li a.active {
    color: var(--text-color); /* Цвет активной ссылки */
    transform: scale(1.3);
    text-decoration: none; /* Убираем подчёркивание */
    pointer-events: none; /* Отключаем возможность клика */
    cursor: default; /* Устанавливаем курсор "по умолчанию" */
}