/* Responsive Design */
@media (max-width: 900px) {
	.slide {
		width: 220px;
	}
	ul li {
		padding: 14px;
	}
	ul li a {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.slide {
		position: relative;
		width: 100vw;
		min-width: 0;
		height: auto;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 10px 0;
	}
	h3, h2 {
		font-size: 1.1em;
		padding-right: 0;
	}
	ul {
		padding: 0;
		margin: 0;
	}
	ul li {
		padding: 10px 8px;
		font-size: 15px;
		border-bottom: 1px solid #eee;
	}
	ul li a {
		font-size: 15px;
		padding: 4px 0;
	}
	ul li a i {
		width: 28px;
		font-size: 1.1em;
	}
}
@import url('https://fonts.googleapis.com/css2?family=Itim&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
*{
	margin: 0;
	padding: 0; 
	box-sizing: border-box;
	font-family: "Merriweather", serif;
}
body {
	
	background: #f2f2f2;
}
.slide{
	position: absolute;
	width: 300px;
	height: 100%;
	background: #fff;
	transition: 0.5s ease;
}
h3{
	text-align: center;
	padding: 10px 0;
	padding-right: 30px;
	color: #561c91;
	pointer-events: none;

}
h2{
	text-align: center;
	padding: 10px 0;
	padding-right: 30px;
	color: #561c91;
	pointer-events: none;

}
ul li{
	list-style: none;
	padding: 20px;
	border-bottom: 1px solid #ccc;
}
/* เพิ่มขนาดตัวอักษรเป็น 18px และจัดข้อความชิดซ้าย */
ul li a{
	text-transform: capitalize;
	color: #011a41;
	font-weight: 500;
	font-size: 18px; /* ขนาดตัวอักษร */
	text-align: left; /* จัดชิดซ้าย */
	padding: 5px 0;
	display: block;
	text-decoration: none;
	transition: 0.2s ease-out;
}
ul li a i{
	width: 40px;
	text-align: left;
}