/* Основной стиль для всего приложения */
body {
    background-color: #222222; /* Темный фон */
    color: #ffffff; /* Белый текст для контраста */
    font-family: 'Roboto', sans-serif; /* Шрифт для читаемости */
}

/* Стиль для кнопок */
.button {
    background-color: #ff4d00; /* Оранжевый цвет кнопки */
    border: none; /* Без рамки */
    color: #ffffff; /* Белый текст на кнопке */
    padding: 10px 20px; /* Отступы внутри кнопки */
    text-align: center; /* Выравнивание текста */
    text-decoration: none; /* Без подчеркивания */
    display: inline-block; /* Блоки рядом */
    font-size: 16px; /* Размер шрифта */
    margin: 4px 2px; /* Отступы между кнопками */
    cursor: pointer; /* Указатель мыши */
    border-radius: 5px; /* Скругленные углы */
    transition: background-color 0.3s; /* Плавный переход */
}

.button:hover {
    background-color: #e63900; /* Цвет кнопки при наведении */
}

/* Стиль для текстовых полей */
.input-field {
    width: 100%; /* Ширина 100% */
    padding: 10px; /* Внутренний отступ */
    margin: 8px 0; /* Отступы сверху и снизу */
    border: 1px solid #ffffff; /* Белая рамка */
    border-radius: 5px; /* Скругление углов */
    background-color: #333333; /* Цвет фона поля */
    color: #ffffff; /* Цвет текста */
}
/* Стили тела */
body {
    background-color: #1c1c1c; /* Темный фон для создания контраста */
    color: #ffffff; /* Белый цвет текста для лучшей читаемости */
    font-family: 'Arial', sans-serif; /* Шрифт для всего интерфейса */
}

/* Заголовки */
h1, h2, h3 {
    color: #ffcc00; /* Яркий цвет заголовков */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Тень для заголовков */
}

/* Кнопки */
.button {
    background-color: #ff0000; /* Красный цвет кнопок */
    border: none; /* Убираем рамку */
    color: #ffffff; /* Белый цвет текста на кнопках */
    padding: 10px 20px; /* Внутренние отступы */
    text-align: center; 
    text-decoration: none; /* Убираем подчеркивание */
    display: inline-block; /* Для корректного отображения */
    margin: 4px 2px; /* Отступы между кнопками */
    cursor: pointer; /* Указатель на кнопки */
    border-radius: 5px; /* Скругленные углы */
}

/* Ховеры для кнопок */
.button:hover {
    background-color: #e60000; /* Изменение цвета при наведении */
}

/* Карточки */
.card {
    background-color: #2d2d2d; /* Фоновый цвет карточек */
    border: 1px solid #444; /* Рамка карточек */
    border-radius: 10px; /* Скругленные углы карточек */
    padding: 15px; /* Внутренние отступы */
    margin-bottom: 20px; /* Отступ между карточками */
}