/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
/* Mengimpor font "Poppins" dari Google Fonts dengan berbagai bobot (200 hingga 700) */

/* Reset dan pengaturan dasar untuk semua elemen */
* {
  margin: 0; /* Menghilangkan margin default dari semua elemen */
  padding: 0; /* Menghilangkan padding default dari semua elemen */
  box-sizing: border-box; /* Memastikan padding dan border tidak menambah ukuran elemen */
  font-family: "Poppins", sans-serif; /* Menggunakan font "Poppins" sebagai font utama, dengan "sans-serif" sebagai alternatif */
}

/* Styling untuk elemen body */
body {
  height: 100vh; /* Mengatur tinggi body agar mengisi seluruh tinggi viewport */
  display: flex; /* Menggunakan Flexbox untuk pengaturan tata letak */
  align-items: center; /* Memusatkan elemen secara vertikal */
  justify-content: center; /* Memusatkan elemen secara horizontal */
  background: #87a5f8; /* Memberikan warna latar belakang biru muda */
}

/* Styling untuk elemen container */
.container {
  position: relative; /* Menjadikan posisi relatif agar elemen di dalamnya bisa diposisikan relatif terhadap container */
  max-width: 350px; /* Lebar maksimum container adalah 350px */
  width: 100%; /* Lebar container akan mengikuti ukuran parent-nya */
  background: #fff; /* Warna latar belakang putih */
  border-radius: 12px; /* Membuat sudut elemen melengkung dengan radius 12px */
  padding: 20px; /* Memberikan ruang di dalam container */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Menambahkan efek bayangan untuk tampilan yang lebih menarik */
}

/* Styling untuk elemen header */
header {
  font-size: 18px; /* Ukuran font header 18px */
  color: #333; /* Warna teks abu-abu gelap */
  font-weight: 500; /* Ketebalan font menengah */
  text-align: center; /* Teks berada di tengah */
}

/* Styling untuk elemen textarea */
textarea {
  width: 100%; /* Mengatur textarea agar memenuhi lebar container */
  height: 180px; /* Menentukan tinggi textarea */
  border-radius: 8px; /* Membuat sudut textarea melengkung */
  margin: 20px 0; /* Memberikan jarak atas dan bawah */
  padding: 12px 15px; /* Memberikan ruang di dalam textarea */
  resize: none; /* Menonaktifkan fitur resize pada textarea */
  outline: none; /* Menghilangkan garis tepi default saat textarea aktif */
  border: 1px solid #aaa; /* Menambahkan border dengan warna abu-abu */
}

/* Styling untuk elemen button */
button {
  width: 100%; /* Tombol akan memiliki lebar penuh */
  padding: 14px 0; /* Memberikan ruang vertikal pada tombol */
  border: none; /* Menghilangkan border default */
  border-radius: 8px; /* Membuat sudut tombol melengkung */
  color: #fff; /* Warna teks putih */
  background: #6e93f7; /* Warna latar belakang biru */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat diarahkan ke tombol */
  transition: all 0.3s ease; /* Menambahkan efek transisi halus saat tombol berubah */
}

/* Efek hover untuk tombol */
button:hover {
  background: #4070f4; /* Mengubah warna latar belakang tombol saat hover */
}