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

/* Стилі для тіла сторінки */
body {
    background-color: #007bff; /* Встановлюємо синій фон */
    background-size: cover; /* Фон повністю покриває сторінку */
    display: flex; /* Використовуємо флекс-контейнер для центрованого розташування */
    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; /* Поміщаємо фон під основний контент */
}

/* Контейнер форми реєстрації */
.signup-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; /* Ховаємо повідомлення за замовчуванням */
}