/* 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 20px 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 */
    outline: none; /* Menghapus garis tepi default saat textarea aktif */
    padding: 8px; /* Memberikan ruang di dalam textarea */
    border-radius: 8px; /* Membuat sudut textarea melengkung */
    margin: 20px 0; /* Memberikan jarak atas dan bawah */
    padding: 10px 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 */
}