/* Сброс отступов и границ для всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Задание 100% высоты и ширины для html и body */
html, body {
    height: 100%;
    width: 100%;
}

html {
    scroll-padding-top: 15%;
}

/* Стили для body */
body {
    display: flex; /* Устанавливает флекс-контейнер */
    flex-direction: column; /* Выстраивает элементы в колонку */
    align-items: center; /* Центрирует элементы по горизонтали */
    width: 100%; /* Устанавливает ширину 100% */
    background: #f0f0f0; /* Цвет фона */
    font-family: Arial, sans-serif; /* Шрифт */
}

/* Стили для контейнера */
#container {
    display: flex; /* Устанавливает флекс-контейнер */
    flex: 1; /* Заполняет оставшееся пространство */
    width: 100%; /* Ширина 100% */
    margin-top: 5%; /* Отступ сверху */
}

/* Стили для шапки (header) */
#header {
    background: linear-gradient(135deg, #873be4 0%, #363636 100%); /* Градиентный фон */
    color: white; /* Цвет текста */
    height: 10%; /* Высота 10% */
    width: 100%; /* Ширина 100% */
    display: flex; /* Устанавливает флекс-контейнер */
    justify-content: center; /* Центрирует содержимое по горизонтали */
    align-items: center; /* Центрирует содержимое по вертикали */
    position: fixed; /* Фиксированное позиционирование */
    top: 0; /* Привязка к верхней части экрана */
    left: 0; /* Привязка к левой части экрана */
    z-index: 1000; /* Уровень слоя */
    box-shadow: 0 4px 8px rgba(76, 9, 87, 0.5); /* Тень */
}

/* Стили для списка в шапке */
#header ul {
    display: flex; /* Устанавливает флекс-контейнер */
    list-style-type: none; /* Убирает маркеры списка */
    padding: 0; /* Сброс отступов */
    margin: 0; /* Сброс полей */
    gap: 20px; /* Промежутки между элементами списка */
}

#header ul a {
    color: white; /* Белый цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
}

/* Стили для основного содержимого (main) */
#main {
    background: white; /* Цвет фона */
    width: 80%; /* Ширина 80% */
    display: flex; /* Устанавливает флекс-контейнер */
    flex-direction: column; /* Выстраивает элементы в колонку */
    align-items: flex-start; /* Выравнивание элементов по левому краю */
    padding: 20px; /* Внутренние отступы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Тень */
    border-radius: 8px; /* Скругленные углы */
    overflow-y: auto; /* Добавляет вертикальную прокрутку при необходимости */
}

.main_text {
    text-align: left; /* Выравнивание текста по левому краю */
    margin-bottom: 20px; /* Нижний отступ */
}

.main_img {
    max-height: 400px; /* Максимальная высота */
    width: auto; /* Автоматическая ширина */
    height: auto; /* Автоматическая высота */
    margin-bottom: 10px; /* Нижний отступ */
    border-radius: 8px; /* Скругленные углы */
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

#aside {
    background: linear-gradient(135deg, #363636 0%, #873be4 100%); /* Градиентный фон */
    color: white; /* Цвет текста */
    height: calc(100% - 10%); /* Высота за вычетом высоты шапки */
    width: 20%; /* Ширина 20% */
    position: fixed; /* Фиксированное позиционирование */
    top: 10%; /* Привязка к нижней границе шапки */
    left: 80%; /* Привязка к правому краю основного содержимого */
    z-index: 1000; /* Уровень слоя */
    padding: 20px; /* Внутренние отступы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

/* Стили для подвала (footer) */
#footer {
    background: linear-gradient(135deg, #363636 0%, #363636 100%); /* Градиентный фон */
    color: white; /* Цвет текста */
    height: 10%; /* Высота 10% */
    width: 100%; /* Ширина 100% */
    display: flex; /* Устанавливает флекс-контейнер */
    justify-content: center; /* Центрирует содержимое по горизонтали */
    align-items: center; /* Центрирует содержимое по вертикали */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* Тень */
    border-top-left-radius: 8px; /* Скругленные углы сверху слева */
    border-top-right-radius: 8px; /* Скругленные углы сверху справа */
    bottom: 0; /* Привязка к нижней части экрана */
    left: 0; /* Привязка к левой части экрана */
}

/* Стили для изображений */
.img {
    max-height: 400px; /* Максимальная высота */
    max-width: 100%; /* Максимальная ширина */
    width: auto; /* Автоматическая ширина */
    height: auto; /* Автоматическая высота */
    margin-bottom: 10px; /* Нижний отступ */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

/* Стили для списка в боковой панели */
#aside ul {
    list-style-type: none; /* Убирает маркеры списка */
    padding: 0; /* Сброс отступов */
    margin: 0; /* Сброс полей */
}

/* Стили для элементов списка в боковой панели */
#aside ul li {
    margin-bottom: 15px; /* Нижний отступ */
}

/* Стили для ссылок в боковой панели */
#aside ul li a {
    color: white; /* Цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    font-size: 16px; /* Размер шрифта */
}


/* Стили для отображения отзывов */
#feedback-list ul {
    list-style-type: none; /* Убирает маркеры списка */
    padding: 0; /* Сброс отступов */
    margin: 0; /* Сброс полей */
}

#feedback-list li {
    background: #f9f9f9; /* Фон */
    border: 1px solid #ddd; /* Граница */
    padding: 15px; /* Внутренние отступы */
    margin-bottom: 10px; /* Нижний отступ */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень */
}

    #feedback-list li strong {
        color: #333; /* Цвет текста */
        display: block; /* Блочный элемент */
        margin-bottom: 5px; /* Нижний отступ */
    }