@charset "utf-8";

/* CSS สำหรับแถบเมนูบาร์ */

/* ทำให้เมนูบาร์อยู่ด้านบนและคงที่ */
.navbar {
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;

    position: fixed;
    top: 30px;

    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 800px;

    z-index: 500;

    /* สำคัญ */
    display: block;
}


/* div ที่ครอบเมนู */
.navbar > div {
    width: 100%;
    text-align: center;
}


/* สไตล์ของลิงก์ในเมนูบาร์ */
.navbar a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: white;

    padding: 14px 20px;

    text-align: center;
    text-decoration: none;

    margin: 0;

    min-width: 35px;
}


/* รูปไอคอน */
.navbar a img {
    display: block;
}


/* เมื่อเอาเมาส์ไปวาง */
.navbar a:hover {
    background-color: black;
    color: rgba(0, 0, 0, 0.4);
}


/* Hamburger */
.navbar .hamburger {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    vertical-align: middle;
}


/* หน้าจอเล็กกว่า 500px */
@media screen and (max-width: 500px) {

    .navbar a {
        padding: 10px 8px;
    }

}


/* ทำให้เนื้อหาด้านล่างเมนูบาร์ไม่ทับกัน */
.content {
    padding-top: 40px;
}