@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Контент вверху */
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #F5E1C8;
    font-family: 'Montserrat', sans-serif;
    color:#6b4f3b;
    overflow-y: auto; /* Прокрутка */
}

.container {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#about {
    text-align: center; /* Центрирование текста */
    margin-bottom: 20px; /* Отступ снизу для разделения с другими блоками */
}

#about h2 {
    font-size: 2em;
    color:#6b4f3b;
    margin: 0; /* Убираем лишние отступы */
}

/* Стили для секции меню */
#menu {
    padding: 20px;
    background-color: #f9f9f9; /* Легкий фон */
    border-radius: 10px; /* Закругленные углы для блока меню */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для объема */
    width: 100%; /* Ширина 100% для контейнера */
    max-width: 900px; /* Максимальная ширина блока */
    margin: 20px auto; /* Центрируем меню и добавляем отступы сверху/снизу */
    box-sizing: border-box; /* Учитываем отступы в размере блока */
}

/* Стили для картинок в меню */
.menu-category img {
    width: 50px; /* Размер картинки */
    height: auto;
    margin-right: 15px; /* Отступ от текста */
    vertical-align: middle;
}

/* Стили для элементов меню */
.menu-category ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-category li {
    font-size: 1.2em;
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* Выравнивание по центру вертикально */
    padding: 10px;
    background-color: #fff; /* Белый фон для каждой позиции */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: none; /* Убираем тень */
}

.menu-category li:hover {
    background-color: #f2f2f2; /* Цвет фона при наведении */
    cursor: pointer; /* Курсор в виде руки при наведении */
}

/* Добавляем отступ между заголовком и меню */
#menu h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #6b4f3b;
}

/* Заголовки */
h2 {
    font-size: 2em;
    color:#6b4f3b;
    margin: 0; /* Убираем лишние отступы */
}

h3 {
    font-size: 1.5em;
    color: #6b4f3b;
    margin: 0; /* Убираем лишние отступы */
}

/* Мобильная версия: адаптация дизайна */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    #about h2 {
        font-size: 1.8em; /* Уменьшаем размер шрифта для мобильных */
    }

    #menu {
        padding: 10px; /* Уменьшаем отступы в меню */
    }

    .menu-category li {
        font-size: 1.1em; /* Уменьшаем шрифт элементов меню */
        padding: 8px; /* Уменьшаем отступы */
    }

    .menu-category img {
        width: 40px; /* Уменьшаем размер изображений */
        margin-right: 10px; /* Меньший отступ от текста */
    }

    h2 {
        font-size: 1.8em; /* Уменьшаем шрифт для заголовков */
    }

    h3 {
        font-size: 1.3em; /* Уменьшаем размер заголовков */
    }
}

/* Стили для маленьких экранов */
@media (max-width: 480px) {
    #about h2 {
        font-size: 1.5em; /* Еще меньше размер шрифта */
    }

    #menu {
        padding: 5px;
    }

    .menu-category li {
        font-size: 1em; /* Еще меньше размер шрифта */
        padding: 5px; /* Уменьшаем отступы */
    }

    .menu-category img {
        width: 35px; /* Еще меньше изображения */
        margin-right: 8px;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }
}