body {
			background-color: #2a2a2a;
			/* 30% Lichter dan puur zwart (#121212) */
			color: #eaf0f6;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		}

		.header-banner {
			background: linear-gradient(135deg, #333333 0%, #3d3d3d 100%);
			border-bottom: 3px solid #ffca28;
			padding: 2.5rem 1rem;
		}

		.header-title {
			color: #ffca28;
			font-weight: 700;
			letter-spacing: 1px;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		/* Flexbox layout voor automatische centrering van overgebleven knoppen */
		.menu-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			/* Centreert de items op de laatste rij */
			gap: 1.25rem;
			padding: 2rem 0;
		}

		/* Knoppen aangepast voor flexbox met een vaste/flexibele breedte */
		.menu-card {
			background-color: #333333;
			color: #eaf0f6;
			border: 1px solid #4a4a4a;
			border-radius: 10px;
			transition: all 0.25s ease-in-out;
			min-height: 80px;
			text-align: center;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

			/* Flex eigenschappen om dezelfde grootte te behouden */
			flex: 1 1 180px;
			max-width: 240px;
			/* Optioneel: voorkomt dat knoppen te breed worden als er maar 1 op de rij staat */
		}

		.menu-card:hover {
			background-color: #ffca28;
			color: #1a1a1a !important;
			border-color: #ffca28;
			transform: translateY(-3px);
			box-shadow: 0 8px 15px rgba(255, 202, 40, 0.25);
		}

		footer {
			background-color: #202020;
			color: #8a8a8a;
			border-top: 1px solid #333333;
		}