@charset "utf-8";
/* รีเซ็ต Margin และ Padding ของ HTML ทั้งหมด */
* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

/* สไตล์ของเมนู */
nav {
    background-color: #3C3963; /* สีพื้นหลังของเมนู */
}

.menu {
    list-style-type: none;
    display: flex;
    justify-content: center; /* จัดให้อยู่กลางหน้าจอ */
}

.menu li {
    margin: 0 35px; /* ระยะห่างระหว่างเมนู */
}

.menu a {
    text-decoration: none; /* ลบเส้นใต้ */
    color: #fff; /* สีตัวอักษร */
    padding: 10px 15px;
    display: block;
    font-size: 18px;
}

.menu a:hover {
    background-color: #FAB12F; /* สีพื้นหลังเมื่อเมาส์ชี้ */
    border-radius: 10px; /* มุมโค้ง */
}/* CSS Document */


/* รีเซ็ต Margin และ Padding ของ HTML ทั้งหมด */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* หน้าหลักละ */


/* การจัดรูปแบบสำหรับ Body ให้เต็มหน้าจอ */
body, html {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

/* จัดให้องค์ประกอบอยู่ตรงกลางทั้งแนวนอนและแนวตั้ง */
.content-container {
    text-align: center; /* จัดข้อความและรูปภาพให้อยู่ตรงกลาง */
}

/* การจัดรูปภาพให้ตรงกลาง */
.centered-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px; /* ระยะห่างระหว่างรูปภาพกับข้อความด้านล่าง */
}

/* การจัดข้อความใต้รูปภาพ */
.image-caption {
    font-size: 24 px;
    color: #FFFFFF;
}

