body {
    justify-items: center;
    align-content: center;
    height: 100vh;
}

.form-section {
    display: flex;
    gap: 8px;
}

/* File: css/style.css */
/* CSS ini dirancang untuk melengkapi HTML Todo List Apps. 
   Kami menggunakan Tailwind CSS untuk beberapa styling dasar, 
   tapi CSS ini menambah sentuhan menarik dan mudah dipahami oleh pemula.
   Setiap bagian dijelaskan dengan komentar agar mudah dipelajari. */

/* Reset dasar untuk memastikan tampilan konsisten di semua browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling untuk body: latar belakang lembut, font yang mudah dibaca, dan padding untuk ruang */
body {
    font-family: 'Arial', sans-serif; /* Font sederhana dan umum */
    background-color: #f0f8ff; /* Warna biru muda untuk latar belakang yang menenangkan */
    color: #333; /* Warna teks gelap untuk kontras yang baik */
    padding: 20px; /* Ruang di sekitar konten */
    line-height: 1.6; /* Jarak antar baris untuk keterbacaan */
}

/* Styling untuk header: membuat judul lebih menonjol dengan warna dan ukuran */
header {
    text-align: center; /* Pusatkan judul */
    margin-bottom: 20px; /* Jarak bawah */
}

header h1 {
    color: #2c3e50; /* Warna biru gelap untuk judul */
    font-size: 2.5rem; /* Ukuran font besar tapi tidak berlebihan */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Bayangan halus untuk efek 3D */
}

/* Styling untuk main: kontainer utama, dengan lebar maksimal untuk tampilan desktop */
main {
    max-width: 600px; /* Lebar maksimal agar tidak terlalu lebar di layar besar */
    margin: 0 auto; /* Pusatkan konten */
    background-color: #ffffff; /* Latar putih untuk kontras */
    padding: 20px; /* Ruang dalam */
    border-radius: 10px; /* Sudut melengkung untuk tampilan modern */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan untuk efek kedalaman */
}

/* Styling untuk section form: bagian input dan tombol add */
.form-section {
    margin-bottom: 20px; /* Jarak bawah */
}

.form-section form {
    display: flex; /* Tata letak horizontal */
    gap: 10px; /* Jarak antar elemen */
    margin-bottom: 10px; /* Jarak bawah form */
}

.form-section input {
    flex: 1; /* Input mengambil ruang yang tersedia */
    padding: 10px; /* Ruang dalam input */
    border: 2px solid #ddd; /* Border abu-abu */
    border-radius: 5px; /* Sudut melengkung */
    font-size: 1rem; /* Ukuran font standar */
}

.form-section input:focus {
    border-color: #3498db; /* Warna biru saat fokus untuk interaktivitas */
    outline: none; /* Hapus outline default */
}

.form-section button {
    padding: 10px 20px; /* Ruang dalam tombol */
    border: none; /* Hapus border */
    border-radius: 5px; /* Sudut melengkung */
    cursor: pointer; /* Kursor tangan saat hover */
    font-size: 1rem; /* Ukuran font */
    transition: background-color 0.3s; /* Transisi halus untuk hover */
}

.form-section button:hover {
    opacity: 0.9; /* Sedikit transparan saat hover untuk efek */
}

/* Styling untuk action section: tombol filter dan clear */
.flex.pt-2.justify-between {
    display: flex; /* Tata letak fleksibel */
    justify-content: space-between; /* Jarak antar tombol */
    margin-bottom: 20px; /* Jarak bawah */
}

.flex.pt-2.justify-between button {
    padding: 10px 15px; /* Ruang dalam tombol */
    border: none; /* Hapus border */
    border-radius: 5px; /* Sudut melengkung */
    cursor: pointer; /* Kursor tangan */
    font-size: 1rem; /* Ukuran font */
    transition: background-color 0.3s; /* Transisi halus */
}

.flex.pt-2.justify-between button:hover {
    transform: scale(1.05); /* Sedikit perbesar saat hover untuk efek menarik */
}

/* Styling untuk todo list section: header dan daftar */
.pt-2 header h1 {
    color: #2c3e50; /* Warna judul */
    margin-bottom: 10px; /* Jarak bawah */
}

#todo-list {
    list-style: none; /* Hapus bullet default */
    padding: 0; /* Hapus padding */
}

#todo-list li {
    background-color: #ecf0f1; /* Latar abu-abu muda untuk item */
    padding: 10px; /* Ruang dalam */
    margin-bottom: 5px; /* Jarak antar item */
    border-radius: 5px; /* Sudut melengkung */
    display: flex; /* Tata letak fleksibel untuk teks dan tombol */
    justify-content: space-between; /* Jarak antar elemen */
    align-items: center; /* Pusatkan vertikal */
}

#todo-list li:hover {
    background-color: #d5dbdb; /* Warna lebih gelap saat hover */
}

/* Styling untuk footer: teks kecil di bawah */
footer {
    text-align: center; /* Pusatkan teks */
    margin-top: 20px; /* Jarak atas */
    color: #7f8c8d; /* Warna abu-abu untuk teks sekunder */
    font-size: 0.9rem; /* Ukuran font kecil */
}

/* Responsivitas: untuk layar kecil, buat main lebih fleksibel */
@media (max-width: 600px) {
    main {
        padding: 10px; /* Kurangi padding di layar kecil */
    }
    
    .form-section form {
        flex-direction: column; /* Tata letak vertikal di layar kecil */
    }
    
    .flex.pt-2.justify-between {
        flex-direction: column; /* Tata letak vertikal untuk tombol */
        gap: 10px; /* Jarak antar tombol */
    }
}