/* 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; /*Menghilang margin default dari semua elmen */
    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; /*Menggunakna flexbbox untuk pengaturab tata letak */
    align-items: center; /*Memusatkan elemen secara vertikal*/
    justify-content: center; /*Memusatkan elemen secara horizontal*/
    background: #87a5f8; /*Memberikan warna latar belakang biru*/
}

/*Styling untuk elemen container*/
.container {
    position: relative; /*Menjadikan posisi relatif agar elemen di dalamnya bisa diposisikan relatif terhadap kontainer*/
    max-width: 350px; /*Lebar maksimum conrtainer adalah 350px*/
    width: 100%; /*Lebar conatiner 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);
}

/*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*/
    align-items: center; /*Teks berada di tengah*/
}

/*Styling untuk elemen textarea*/
textarea {
    width: 100%; /*Mengatur textarea agar memnuhi lebar container*/
    height: 180px; /*Menentukan tinggi 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 pada tepi default saat textarea aktif*/
    border: 1px solid #aaa; /*Menambahkan border dengan warna abu-abu*/
}

/*Styling untuk elemen*/
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 sudurt tombol melengkung*/
    color: #fff; /*Warna teks putih*/
    background: #6e93f7; /*Warna latar belakng biru*/
    cursor: pointer; /*Mengubah kursir menjadi pointer saat diarahkan ke tombol */
    transition: all 0.3s ease; /*Menambahkan efek tramsisi halus saat tombol berubah*/
}

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