/* Общие стили */
body {
    font-family: Arial, sans-serif; /* Шрифт по умолчанию */
    background-color: #f4f4f4; /* Светло-серый фон */
    margin: 0; /* Убираем отступы по умолчанию у body */
    padding: 20px; /* Добавляем отступы вокруг содержимого */
    display: flex; /* Используем flexbox для центрирования */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center;  /* Центрируем по вертикали */
    min-height: 100vh;  /*  Чтобы body занимал всю высоту экрана  */
}

/* Контейнер для форм */
body > * { /* Применяем стили ко всем прямым потомкам body */
    width: 100%;  /* Занимает всю доступную ширину */
    max-width: 400px;  /* Максимальная ширина */
    padding: 20px;  /* Отступы внутри контейнера */
    background-color: #fff; /* Белый фон */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Небольшая тень */
    margin-bottom: 20px; /* Отступ между формами */
}


/* Заголовки */
h1 {
    text-align: center; /* Центрируем заголовки */
    color: #333; /* Темно-серый цвет текста */
    margin-bottom: 20px;  /* Добавляем отступ снизу */
}

/* Метки (labels) */
label {
    display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Поля ввода (input) */
input[type="text"],
input[type="password"] {
    width: 100%; /* Поля ввода занимают всю ширину */
    padding: 10px; /* Отступы внутри полей ввода */
    margin-bottom: 20px;
    border: 1px solid #ccc; /* Серая рамка */
    border-radius: 4px; /* Скругленные углы */
    box-sizing: border-box; /*  Чтобы padding и border не увеличивали ширину  */
}

/* Кнопки */
button {
    background-color: #4CAF50; /* Зеленый фон */
    color: white; /* Белый текст */
    padding: 12px 20px; /* Отступы внутри кнопки */
    border: none; /* Убираем рамку */
    border-radius: 4px; /* Скругленные углы */
    cursor: pointer; /*  Изменение курсора при наведении  */
    width: 100%; /* Кнопка занимает всю ширину */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s ease; /* Анимация при наведении */
}

button:hover {
    background-color: #45a049; /* Более темный зеленый при наведении */
}

    display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Поля ввода (input) */
input[type="text"],
input[type="password"] {
    width: 100%; /* Поля ввода занимают всю ширину */
    padding: 10px; /* Отступы внутри полей ввода */
    margin-bottom: 20px;
    border: 1px solid #ccc; /* Серая рамка */
    border-radius: 4px; /* Скругленные углы */
    box-sizing: border-box; /*  Чтобы padding и border не увеличивали ширину  */
}

/* Кнопки */
button {
    background-color: #4CAF50; /* Зеленый фон */
    color: white; /* Белый текст */
    padding: 12px 20px; /* Отступы внутри кнопки */
    border: none; /* Убираем рамку */
    border-radius: 4px; /* Скругленные углы */
    cursor: pointer; /*  Изменение курсора при наведении  */
    width: 100%; /* Кнопка занимает всю ширину */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s ease; /* Анимация при наведении */
}

button:hover {
    background-color: #45a049; /* Более темный зеленый при наведении */
}