/* Універсальний селектор */ * { margin: 0; /* Встановлюємо зовнішній відступ у 0 для всіх елементів */ padding: 0; /* Встановлюємо внутрішній відступ у 0 для всіх елементів */ box-sizing: border-box; /* Забезпечує включення padding і border до загальної ширини та висоти */ font-family: 'Playfair Display', serif; /* Встановлюємо шрифт для всього документа */ } /* Стилізація тега */ body { background-color: #007bff; /* Встановлюємо синій колір фону */ display: flex; /* Використовуємо flexbox для розміщення елементів */ align-items: center; /* Вирівнюємо елементи по вертикалі */ justify-content: center; /* Вирівнюємо елементи по горизонталі */ height: 100vh; /* Задаємо висоту 100% від висоти вікна браузера */ } /* Контейнер форми */ .contact-form-container { background-color: #ffffff; /* Білий фон для контейнера */ padding: 2rem; /* Внутрішній відступ у 2 рем */ border-radius: 8px; /* Згладжуємо кути контейнера */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Додаємо легку тінь */ width: 320px; /* Фіксована ширина контейнера */ text-align: center; /* Текст вирівнюється по центру */ } /* Стилізація заголовка в контейнері */ .contact-form-container h2 { font-size: 1.5rem; /* Розмір шрифту 1.5 рем */ margin-bottom: 1rem; /* Відступ знизу 1 рем */ color: #007bb5; /* Синій колір тексту */ } /* Стилізація полів форми та кнопки */ form input, form textarea, form button { width: 100%; /* Ширина 100% від контейнера */ padding: 0.5rem; /* Внутрішній відступ 0.5 рем */ margin-bottom: 1rem; /* Відступ знизу 1 рем */ border: 1px solid #b3d4fc; /* Блакитний колір обведення */ border-radius: 4px; /* Згладжуємо кути елементів */ font-size: 1rem; /* Розмір шрифту 1 рем */ } /* Стилізація тексту placeholder */ form input::placeholder, form textarea::placeholder { color: #8ab6e5; /* Світло-блакитний колір для підказок */ font-style: italic; /* Курсив для тексту */ } /* Стилізація активного стану полів */ form input:focus, form textarea:focus { outline: none; /* Вимикаємо стандартну обведення */ border-color: #007bb5; /* Синій колір обведення при фокусі */ } /* Стилізація кнопки */ form button { background-color: #007bb5; /* Синій фон кнопки */ color: #ffffff; /* Білий колір тексту */ font-weight: bold; /* Жирний текст */ cursor: pointer; /* Змінюємо курсор на "руку" */ border: none; /* Відсутність обведення */ transition: background-color 0.3s; /* Плавний перехід кольору фону */ } /* Стилізація кнопки при наведенні */ form button:hover { background-color: #005f99; /* Темніший синій фон при наведенні */ } /* Стилізація повідомлень про помилки */ .error-message { color: #e63946; /* Червоний колір тексту */ font-size: 0.8rem; /* Розмір шрифту 0.8 рем */ text-align: left; /* Вирівнюємо текст по лівому краю */ display: none; /* Ховаємо повідомлення за замовчуванням */ } /* Приховані елементи */ .hidden { display: none; /* Ховаємо елементи */ } /* Стилізація повідомлення про успіх */ #successMessage { font-size: 0.9rem; /* Розмір шрифту 0.9 рем */ color: #007bb5; /* Синій колір тексту */ margin-top: 1rem; /* Відступ зверху 1 рем */ }