/* opmaak.css - additional styles */
/*taakverdeling tabel*/
.taak-verdeling {
	width: 80%;
	margin: 0.5rem auto;
	border-collapse: collapse;
	font-family: Arial, sans-serif;
}
.taak-verdeling th, .taak-verdeling td {
	border: 1px solid #ccc;
	padding: 8px 12px;
	text-align: left;
}
.taak-verdeling th {
	background: #f7e7ef;
}
.Nout {
	color: #b30059;
	font-weight: bold;
}
.Mickey {
	color: #0b5ea8;
	font-weight: bold;
}

/* de list voor de gerechten*/
.lijst-gerechten {
	display: block;
	margin: 0.5rem auto;
	max-width: 720px;
}
.naam-gerecht {
	list-style: disc inside; /* disc zorgt voor bolletjes */
	padding-left: 1rem; /* ruimte tussen de tekst en rand*/
	margin: 0; /* zorgt ervoor dat de extrra ruimte weg is*/
	color: #222; /*kleur voor de beschrijving van de gerechten*/
}
.naam-gerecht li {
	background: transparent;
	border: none; /* geen rand */
	padding: 6px 0; 
	margin: 6px 0; /* zonder dit zit de tekst op elkar */
	
	
}
.naam-gerecht li strong { /* nu krijgen alleen de namen die binnen strong zijn de kleur*/
	color: #fffffffb;
}


@media (max-width: 600px) {      /* responsive voor mobiel */
	.lijst-gerechten {
		padding: 0 12px; /* ruimte zodat tekst niet tegen rand zit */
	}

	.naam-gerecht li {
		font-size: 0.95rem; /* iets kleinere tekst op mobiel */
	}
}

img[src="Images/download.jpg"] {
	margin-left: 100px;
	margin-top: 10px;
}



.drie-gerechten {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.drie-gerechten img {
	width: 220px;
	height: auto;
	display: block;
}

img[src="Images/downloaden (3).jpg"] { 
    border-radius: 60px;
}

/* responsive codes*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.drie-gerechten, .drie.gerechten {
	display: flex;         /* naast elkaar */
	justify-content: space-between; /* gelijk verdeeld */
	gap: 1px;             /* kleine ruimte tussen afbeeldingen */
}

/* afbeeldingen */
.drie-gerechten img, .drie.gerechten img {
	width: 32%;           /* ongeveer 3 naastt elkaar */
	height: auto;         
	border-radius: 8px;   
}

/* op mobiel */
@media (max-width: 600px) {
	.drie-gerechten img, .drie.gerechten img {
		width: 100%;      
	}
}