/* Общие стили для всего документа */
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* Шрифт для всего документа */
    background-color: #f4f4f4;
    /* Светло-серый цвет фона */
    margin: 0;
    /* Убираем отступы по краям */
    padding: 0;
    /* Убираем внутренние отступы */
    color: #333;
    /* Темно-серый цвет текста */
    text-align: center;
    /* Центрирование содержимого body */
}

/* Стили для header (шапка сайта) */
header {
    padding: 20px 0;
    /* Внутренние отступы сверху и снизу */
    background-color: #ffae83;
    /* Зелёный фон для всего header */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Легкая тень */
}

/* Стили для блока внутри header */
.header-content {
    background-color: #ffae83;
    /* Зелёный фон для блока */
    color: rgb(75, 45, 0);
    /* Белый цвет текста */
    padding: 20px;
    /* Внутренние отступы для блока */
    display: flex;
    /* Гибкая разметка для выравнивания логотипа и текста */
    align-items: center;
    /* Центрирование содержимого по вертикали */
    justify-content: center;
    /* Центрирование содержимого по горизонтали */
    border-radius: 8px;
    /* Закругленные углы */
    max-width: 800px;
    /* Максимальная ширина блока */
    margin: 0 auto;
    /* Центрирование блока по горизонтали */
    text-align: left;
    /* Текст выровнен по левому краю */
}

/* Стили для логотипа */
.logo {
    margin-right: 20px;
    /* Отступ справа от логотипа */
    width: 100px;
    /* Ширина логотипа */
}

/* Стили для заголовка и описания в header */
header h1 {
    font-size: 2.2em;
    /* Размер шрифта для заголовка */
    margin: 0;
    /* Убираем внешние отступы */
}

header p {
    font-size: 1.2em;
    /* Размер шрифта для описания */
    margin: 5px 0 0;
    /* Внешние отступы: сверху 5px, остальные 0 */
}

/* Стили для основного контента */
.main-content {
    margin: 20px auto;
    /* Внешние отступы */
    padding: 15px;
    /* Внутренние отступы */
    background-color: white;
    /* Белый цвет фона */
    border-radius: 8px;
    /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Легкая тень вокруг блока */
    max-width: 900px;
    /* Максимальная ширина */
}

/* Стили для заголовков в контенте */
h2 {
    color: #333;
    /* Цвет текста заголовка */
    border-bottom: 2px solid #ffae83;
    /* Нижняя граница заголовка */
    padding-bottom: 5px;
    /* Внутренний отступ снизу */
    text-align: center;
    /* Центрирование заголовков */
}

/* Стили для рисовалки */
#toolbar {
    display: flex;
    /* Гибкая разметка */
    flex-wrap: wrap;
    /* Перенос строки для элементов */
    justify-content: center;
    /* Центрирование содержимого */
    margin-bottom: 15px;
    /* Внешний отступ снизу */
}

#canvas {
    border: 2px solid #ffae83;
    /* Зелёная рамка */
    border-radius: 8px;
    /* Закругленные углы */
    cursor: crosshair;
    /* Курсор в виде крестика */
    margin-bottom: 15px;
    /* Внешний отступ снизу */
    background-color: #fff;
    /* Белый цвет фона */
    width: 100%;
    /* Ширина на весь контейнер */
    height: 500px;
    /* Высота холста */
}

/* Стили для кнопок и элементов управления */
button,
input[type="color"],
input[type="range"],
#download {
    padding: 10px 15px;
    /* Внутренние отступы */
    font-size: 16px;
    /* Размер шрифта */
    border: none;
    /* Убираем рамку */
    outline: none;
    /* Убираем обводку */
    cursor: pointer;
    /* Курсор в виде руки */
    border-radius: 5px;
    /* Закругленные углы */
    margin: 5px;
    /* Внешние отступы */
    background-color: #FFC000;
    /* Жёлтый фон кнопок */
    color: #333;
    /* Цвет текста */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Легкая тень */
    text-decoration: none;
}

/* Стили для кнопок при наведении */
button:hover,
#download:hover {
    background-color: #FFD700;
    /* Светлее при наведении */
}

/* Стили для footer (подвала сайта) */
footer {
    text-align: center;
    /* Центрирование текста */
    padding: 10px;
    /* Внутренние отступы */
    background-color: #333;
    /* Темно-серый цвет фона */
    color: white;
    /* Белый цвет текста */
}

/* Стили для индикатора текущего цвета */
#current-color-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#current-color-indicator p {
    margin-right: 10px;
    /* Отступ между текстом и индикатором */
    font-size: 1em;
    color: #333;
    /* Цвет текста */
}

#current-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ff8e52;
    /* Зелёная рамка вокруг индикатора */
}