/* Общий стиль для центрирования содержимого по вертикали и горизонтали */
body {
  display: flex; /* Используем flexbox для центрирования */
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  min-height: 100vh; /* Занимает всю высоту экрана */
  margin: 0; /* Убираем стандартные отступы body */
  font-family: sans-serif; /* Просто симпатичный шрифт */
}

/* Контейнер для формы для удобства настройки */
.login-container {
  text-align: center; /* Выравниваем текст по центру внутри контейнера */
  padding: 20px; /* Добавляем немного отступов вокруг формы */
  border: 1px solid #ccc; /* Рамочка (необязательно) */
  border-radius: 5px; /* Скругляем углы рамки (необязательно) */
  background-color: #f9f9f9; /*  Фоновый цвет (необязательно) */
}

/* Стили для элементов формы (можно настроить по вкусу) */
input[type="text"], input[type="password"] {
  margin: 10px 0; /* Отступы сверху и снизу */
  padding: 8px; /* Внутренние отступы */
  border: 1px solid #ddd; /* Рамка для инпутов */
  border-radius: 4px; /* Скругление углов */
}

button {
  padding: 10px 20px; /* Отступы внутри кнопки */
  background-color: #4CAF50; /* Зеленый цвет (можно изменить) */
  color: white; /* Белый текст */
  border: none; /* Убираем рамку */
  border-radius: 4px; /* Скругляем углы */
  cursor: pointer; /* Курсор в виде руки при наведении */
}

#message {
  margin-top: 10px; /* Отступ сверху */
  color: red; /* Красный цвет текста (для ошибок) */
}