/* styles.css */

body {
    font-family: Arial, sans-serif; /* ใช้ฟอนต์ที่อ่านง่าย */
    background-color: #f4f4f4; /* สีพื้นหลัง */
    margin: 0; /* ไม่มี margin */
    padding: 20px; /* เพิ่ม padding รอบๆ */
}

img {
    max-width: 100%; /* ทำให้ภาพขยายเต็มความกว้างของ container */
    height: auto; /* รักษาสัดส่วนของภาพ */
    display: block; /* แสดงภาพเป็นบล็อก */
    margin: 0 auto; /* จัดกลางภาพ */
}

li {
    list-style-type: none; /* ลบจุดหน้ารายการ */
    background: #fff; /* พื้นหลังของรายการ */
    margin: 10px 0; /* เพิ่มระยะห่างระหว่างรายการ */
    padding: 10px; /* เพิ่ม padding ภายในรายการ */
    border-radius: 5px; /* มุมที่มน */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เงา */
}

h1 {
    color: #333; /* สีของหัวข้อ */
    text-align: center; /* จัดกลางหัวข้อ */
}

h2 {
    color: #666; /* สีของหัวข้อรอง */
    text-align: left; /* จัดซ้ายหัวข้อรอง */
}