@charset "utf-8";
/* CSS สำหรับแถบเมนูบาร์ */
        /* ทำให้เมนูบาร์อยู่ด้านบนและคงที่ */
        .navbar {
            background-color: rgba(0, 0, 0, 0);
			overflow: hidden;                /* ป้องกันเนื้อหาเกินขอบ */
            position: fixed;
            top: 30px;
            width: 100%;
			max-width: 800px;   /* จำกัดความกว้างสูงสุด */
			margin: 0 auto;      /* จัดให้อยู่กึ่งกลาง */
            z-index: 500;
  			display: flex;                   /* เรียงลิงก์เป็นแถว */
 		    justify-content: space-around;  /* เว้นช่องว่างเท่าๆ กัน */
  			flex-wrap: nowrap;              /* ห้ามขึ้นบรรทัดใหม่ */
        }

        /* สไตล์ของลิงก์ในเมนูบาร์ */
        .navbar a {
			flex: 1;                        /* ให้ลิงก์แต่ละอันใช้พื้นที่เท่ากัน */
 		    min-width: 35px;               /* ป้องกันไม่ให้เล็กเกินไป */
			font-size: 1.2vw;				/* ขนาดตัวอักษรสัมพันธ์กับความกว้างจอ */
            display: inline-block;
            color: white;
            padding: 14px 20px;
            text-align: center;				/* ตัวหนังสืออยู่กลาง */
            text-decoration: none;
			margin: 0 auto;      /* จัดให้อยู่กึ่งกลาง */
			
        }

        .navbar a:hover {
            background-color: black;		 /* เมื่อเอาเมาส์ไปวาง เปลี่ยนเป็นดำเข้มขึ้น */
            color: rgba(0, 0, 0, 0.4);		 /* สีใส */
        }
	
		@media screen and (max-width: 500px) 
		{
  		 .navbar a {
   		  font-size: 3vw;		/*ถ้าหน้าจอเล็กกว่า 500px (มือถือเล็กๆ)จะปรับ font-size ให้ใหญ่ขึ้นนิดนึง (3vw) เพื่อให้อ่านง่าย*/
   		  padding: 10px 0;		/*และลด padding ลงเพื่อไม่ให้เปลืองพื้นที่ */
 		 }
		}


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