body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e8f5e9; /* สีเขียวอ่อน */
    text-align: center;
}

header {
    background: linear-gradient(135deg, #66bb6a, #388e3c); /* ไล่เฉดสีเขียวจากอ่อนไปเข้ม */
    color: white;
    padding: 15px;  /* คงขนาด padding เดิม */
    font-size: 22px; /* คงขนาดฟอนต์เดิม */
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

nav {
    background: linear-gradient(135deg, #81c784, #4caf50); /* ไล่เฉดสีเขียว */
    padding: 6px; /* ลด padding */
}

nav a {
    color: white;
    text-decoration: none;
    padding: 6px 14px; /* ลด padding */
    display: inline-block;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #388e3c; /* สีเขียวเข้มเมื่อ hover */
}

.container {
    width: 50%;  /* ลดความกว้างให้เล็กลงอีก */
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* ลดขนาดเงา */
    padding: 12px; /* ลด padding */
    margin: 15px auto; /* ลด margin */
    border-radius: 8px;
}

footer {
    background: linear-gradient(135deg, #66bb6a, #388e3c); /* ไล่เฉดสีเขียวเหมือน header */
    color: white;
    padding: 6px;  /* ลด padding */
    width: 100%;
    font-size: 14px; /* ลดขนาดฟอนต์ */
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.2);
}