/* ในไฟล์ style.css */

body {
    /* 1. เปิดใช้งาน Flexbox */
    display: flex;
    
    /* 2. กำหนดให้องค์ประกอบลูก (h1, img) เรียงกันในแนวตั้ง */
    flex-direction: column; 

    /* 3. จัดกลางในแนวตั้ง (Vertical Centering) */
    justify-content: center; 

    /* 4. จัดกลางในแนวนอน (Horizontal Centering) */
    align-items: center; 
    
    /* ---------------------------------------------------- */
    /* *** สำคัญที่สุดสำหรับการจัดกลางแนวตั้ง *** */
    
    /* 5. กำหนดความสูงให้เต็มหน้าจอ (Viewport Height) */
    min-height: 100vh;
    
    /* 6. ลบขอบ (margin) เริ่มต้นที่เบราว์เซอร์ใส่ให้ออก */
    margin: 0; 
    /* ---------------------------------------------------- */
    
    /* (ตัวเลือกเสริม: จัดพื้นหลังเป็นสีขาวทั้งหน้าจอ) */
    background-color: white; 
    background-image: url('https://files.catbox.moe/4al8sh.png');

}

h1 {
    /* 1. การเพิ่มพื้นหลังให้กับข้อความ (Background Color) */
    background-color: rgba(247, 24, 161, 0.851); /* สีขาวใส (White with 85% opacity) */
    padding: 10px 20px; /* เพิ่มระยะห่างระหว่างข้อความกับขอบพื้นหลัง */
    border-radius: 5px; /* ทำให้มุมของพื้นหลังโค้งมนเล็กน้อย */
    
    /* 2. การเพิ่มเงาให้กับฟอนต์ (Text Shadow) */
    /* รูปแบบ: text-shadow: ระยะแนวนอน ระยะแนวตั้ง เบลอ สี; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* เงาสีดำจาง ๆ */
    
    /* 3. การปรับข้อความให้ดูดีขึ้น */
    color: #333; /* สีตัวอักษรเป็นสีเทาเข้ม */
    font-size: 3em; /* ขนาดตัวอักษรใหญ่ขึ้น */
    margin-bottom: 30px; /* เพิ่มระยะห่างด้านล่าง h1 เพื่อแยกออกจากรูปภาพ */
}
#fixed-image {
  /* กำหนดการจัดวางให้อยู่กับที่ */
  position: center;
  display:flex;
  /* กำหนดให้อยู่ที่ขอบล่างของหน้าต่าง */
  bottom: 0px;
  
  /* กำหนดให้อยู่ชิดซ้ายสุด (ถ้าต้องการให้อยู่ตรงกลางหรือขวาให้ปรับค่านี้) */
  left: 0; 
  
  /* ตัวเลือก: กำหนดความกว้างเต็มจอ (ถ้าต้องการ) */
  /* width: 100%; */ 
  
  /* ตัวเลือก: ปรับระดับชั้นให้สูงกว่าองค์ประกอบอื่น */
  /* z-index: 100; */
}
#centered-content {
    /* 1. การติดอยู่กับที่ (Fixed Position) */
    position: fixed;
    
    /* 2. ติดที่ขอบล่างของหน้าต่างเบราว์เซอร์ */
    bottom: 0;
    
    /* 3. จัดกึ่งกลางแนวนอน (Horizontal Centering) */
    /* เริ่มต้นวางองค์ประกอบที่ 50% ของความกว้างจอ */
    left: 50%; 
    /* ย้ายกลับไปทางซ้ายเท่ากับครึ่งหนึ่งของความกว้างองค์ประกอบเอง */
    transform: translateX(-50%); 
    
    /* ตัวเลือก: ปรับระดับชั้น (ถ้ามีองค์ประกอบอื่นบัง) */
    z-index: 1000;
    
    /* ตัวเลือก: กำหนดความกว้างสูงสุดของกลุ่มองค์ประกอบ */
    max-width: 500px; 
    text-align: center; /* ช่วยให้ h1 และ img จัดอยู่ตรงกลางภายใน div นี้ */
}