/* === Основные стили для страницы === */
body {
    margin: 0; /* Убирает стандартные отступы */
    font-family: Arial, sans-serif; /* Устанавливает шрифт для текста */
    color: #ffffff; /* Белый текст по умолчанию */
    background: #000000; /* Чёрный фон */
    overflow-x: hidden; /* Убирает горизонтальную прокрутку */
}

/* Фон страницы с размытием */
body::before {
    content: ""; /* Добавляет пустой псевдоэлемент для оформления */
    position: fixed; /* Фон фиксирован на месте */
    top: 0;
    left: 0;
    width: 100%; /* Покрывает всю ширину */
    height: 100%; /* Покрывает всю высоту */
    background: url('background.png') no-repeat center center fixed; /* Устанавливает изображение фоном */
    background-size: cover; /* Растягивает фон, чтобы он покрывал весь экран */
    filter: blur(8px); /* Размытие для фона */
    z-index: -1; /* Фон остаётся за всем содержимым */
}

/* === Шапка сайта (header) === */
header {
    padding: 10px 20px; /* Внутренние отступы */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Тень под шапкой */
    background: rgba(255, 255, 255, 0.1); /* Прозрачный белый фон */
}

/* Меню навигации (список в header) */
nav ul {
    list-style: none; /* Убирает маркеры у списка */
    display: flex; /* Располагает элементы в строку */
    justify-content: flex-start; /* Выравнивание влево */
    padding: 0;
    margin: 0;
}

nav ul li {
    margin-right: 20px; /* Расстояние между пунктами */
}

nav ul li a {
    text-decoration: none; /* Убирает подчеркивание */
    color: #ffffff; /* Белый цвет текста */
    font-weight: bold; /* Жирный шрифт */
}

/* === Главный блок контента === */
main {
    padding: 20px; /* Внутренний отступ */
    text-align: center; /* Выравнивает содержимое по центру */
}

main h1 {
    font-size: 2.5em; /* Размер текста заголовка */
    color: #ffffff; /* Белый цвет текста */
    margin-bottom: 50px; /* Отступ снизу */
}

/* === Кнопки для главной страницы и страницы скачивания === */
.get-btn, .download-btn {
    background: #ffffff; /* Белый фон кнопки */
    color: #000; /* Черный цвет текста */
    font-size: 1.5em; /* Размер текста */
    padding: 20px 40px; /* Внутренние отступы */
    border: none; /* Убирает границу */
    border-radius: 10px; /* Закругленные углы */
    cursor: pointer; /* Указатель при наведении */
    text-decoration: none; /* Убирает подчеркивание у ссылок */
    transition: background 0.3s ease, transform 0.2s ease; /* Плавный эффект при наведении */
    margin-top: 100px; /* Увеличенный отступ сверху */
    display: inline-block; /* Корректное отображение кнопок */
}   

.get-btn:hover, .download-btn:hover {
    background: #333333; /* Тёмно-серый фон при наведении */
    transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* === Настройки формы === */
.settings section {
    margin-bottom: 20px; /* Расстояние между секциями */
    text-align: left; /* Выравнивание текста слева */
}

.settings label {
    display: block; /* Отображение каждой метки на новой строке */
    font-size: 1.1em; /* Увеличенный размер шрифта */
    margin-bottom: 10px; /* Отступ снизу */
    color: #ffffff; /* Белый цвет текста */
}

.settings input {
    width: calc(100% - 20px); /* Ширина поля */
    padding: 10px; /* Внутренний отступ */
    margin-bottom: 20px; /* Расстояние между полями */
    border-radius: 5px; /* Закругленные углы */
    border: 1px solid #ffffff; /* Белая рамка */
}


/* === Кнопки переключателей (toggle buttons) === */
.toggle-buttons {
    display: flex; /* Выстраивает кнопки в строку */
    gap: 10px; /* Расстояние между кнопками */
    margin-top: 10px; /* Отступ сверху */
}

.toggle-btn {
    color: #ffffff; /* Белый текст */
    padding: 10px 20px; /* Внутренние отступы */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: all 0.3s ease; /* Плавный эффект */
    background: #333333; /* Тёмно-серый фон */
    border: 1px solid #555555; /* Светло-серая граница */
}

.toggle-btn.active {
    background: #ffffff; /* Белый фон активной кнопки */
    color: #000; /* Черный текст */
    border-color: #ffffff; /* Белая граница */
}

.toggle-btn:hover {
    background: #666666; /* Светло-серый фон при наведении */
}

/* === Кнопка "Сохранить" === */
.save-btn {
    background: #ffffff; /* Белый фон */
    color: #000; /* Черный текст */
    border: none; /* Убирает границу */
    padding: 10px 20px; /* Внутренние отступы */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: all 0.3s ease; /* Плавный эффект */
}

.save-btn:hover {
    background: #cccccc; /* Светло-серый фон при наведении */
}