/* Скидає всі відступи, padding та додає обчислення розмірів через border-box */
* {
    margin: 0; /* Задає нульові зовнішні відступи для всіх елементів */
    padding: 0; /* Задає нульові внутрішні відступи для всіх елементів */
    box-sizing: border-box; /* Включає padding і border у розрахунок розмірів */
    font-family: Arial, sans-serif; /* Встановлює шрифт за замовчуванням */
}

/* Стилі для тіла сторінки */
body {
    background-color: #007bff; /* Синій фон */
    background-size: cover; /* Фон розтягується для покриття всього екрану */
    display: flex; /* Використовується для вирівнювання через flexbox */
    justify-content: center; /* Центрує вміст горизонтально */
    align-items: center; /* Центрує вміст вертикально */
    height: 100vh; /* Висота займає весь екран */
}

/* Створює напівпрозорий блакитний фільтр поверх фону */
body::before {
    content: ""; /* Псевдоелемент для фону */
    position: absolute; /* Абсолютне позиціонування щодо сторінки */
    top: 0; /* Прив'язка до верхньої частини */
    left: 0; /* Прив'язка до лівого краю */
    width: 100%; /* Ширина фільтра - вся сторінка */
    height: 100%; /* Висота фільтра - вся сторінка */
    background-color: rgba(173, 216, 230, 0.16); /* Напівпрозорий блакитний фільтр */
    z-index: -1; /* Відправляє фільтр на задній план */
}

/* Контейнер для форми входу */
.login-container {
    background-color: rgba(255, 255, 255, 0.2); /* Напівпрозорий білий фон */
    border-radius: 10px; /* Згладжені кути контейнера */
    padding: 20px; /* Внутрішні відступи для естетики */
    width: 300px; /* Фіксована ширина контейнера */
    text-align: center; /* Вирівнювання тексту по центру */
    backdrop-filter: blur(10px); /* Ефект розмиття фону під контейнером */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Напівпрозора рамка */
}

/* Заголовок форми входу */
h2 {
    color: #003f5c; /* Темно-синій колір тексту */
    margin-bottom: 20px; /* Відступ знизу для візуального розділення */
}

/* Група для полів вводу */
.input-group {
    position: relative; /* Використовується для позиціонування дочірніх елементів */
    margin-bottom: 15px; /* Відступ між групами */
}

/* Поле вводу */
.input-group input {
    width: 100%; /* Ширина поля вводу - вся доступна ширина */
    padding: 10px; /* Внутрішні відступи для зручності */
    border: none; /* Видаляє рамку за замовчуванням */
    border-radius: 5px; /* Згладжені кути поля вводу */
    background-color: rgba(255, 255, 255, 0.5); /* Напівпрозорий білий фон */
    outline: none; /* Видаляє зовнішнє підсвічування при фокусі */
    color: #003f5c; /* Темно-синій текст */
}

/* Кнопка для перемикання видимості пароля */
.input-group .toggle-password {
    position: absolute; /* Абсолютне позиціонування в межах групи */
    right: 10px; /* Відступ від правого краю */
    top: 10px; /* Вирівнювання по вертикалі */
    cursor: pointer; /* Вказівник змінюється на руку при наведенні */
    color: #5f9ea0; /* Колір іконки - темно-блакитний */
}

/* Кнопка для входу */
button {
    width: 100%; /* Ширина кнопки - вся доступна ширина */
    padding: 10px; /* Внутрішні відступи для зручності */
    border: none; /* Видаляє стандартну рамку кнопки */
    border-radius: 5px; /* Згладжені кути кнопки */
    background-color: #add8e6; /* Світло-блакитний фон кнопки */
    color: #003f5c; /* Темно-синій текст */
    font-size: 16px; /* Розмір тексту */
    cursor: pointer; /* Вказівник змінюється на руку при наведенні */
    transition: background-color 0.3s; /* Анімація зміни кольору при наведенні */
    opacity: 1; /* Повна непрозорість */
}

/* Зміна кольору кнопки при наведенні */
button:hover {
    background-color: #87cefa; /* Яскравіший блакитний колір */
}

/* Повідомлення про помилку */
.error-message {
    color: #ff0000; /* Червоний колір для акценту на помилку */
    margin-top: 10px; /* Відступ зверху для відділення від інших елементів */
    font-size: 14px; /* Невеликий текст */
    display: none; /* Спочатку приховано */
}