/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
  box-sizing:border-box;  
}

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	

}


nav ul{
	text-decoration: none;
	
}

nav li{
	list-style: none;
    
}


li{
	list-style: none ;
	grid-column-start: 1;
	grid-column-end: 2;
}

header a{
	color: black;
}

footer a{
	color: white;
}


body {

	background-color: rgb(37, 40, 43);
    color: white;
	font-family: 'Montserrat',sans-serif;
	margin: 0em ;
}
header img {
	width: 3em;
	justify-content: center;
}
h1{
	display: none;
}

p{
	font-weight: 400;
}

/* code over achtergrondplaatje van 
https://www.w3schools.com/cssref/pr_background-image.php */ 

/* code over donkere gloed achtergrond plaatje van chatgpt,
prompt: "over deze achtergrond image zit een donkere filter 
volgens mij, hoe kan ik dit in css namaken?" 
(ik heb een screenshot van het plaatje toegevoegd) */
.Achtergrondplaatje{
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/AchtergrondHomepage.jpg');
	max-width: 100%;
	height: auto;
	background-size: cover;
	padding-top: 6em;
	padding-bottom: 5em;
	text-align: center;

	
}

a{
	text-decoration: none ;
	color: white;
	
}
main a{
	color: #000000;
}


.zwarteknop :hover a{
	background-color: darkgrey;
	color: white;
}



.zwarteknop{
    background-color: black;
	color: white;
	border-radius: 2em;
	padding: 0.7em ;
	font-weight:500 ;
}

div{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	
}
.menuIcoon{
	height: 3em;
	width: 2em;
}

.witteknop{
	color: black;
	background-color: white;
	border-radius: 2em;
	padding:0.5em; 
	margin-bottom: 1em;
	font-weight: 500;
}

.witteknop :hover{
color: grey;
}

.wittesectie{
	background-color: white ;
	color: black ;
}


h2{
	align-items: center;
}

.eersteH2{
	font-weight: 800;
	text-align: center;
	
}

.kleur2epagina{
	background-color: white;
	color: black;
}

.comboOffers{
	list-style: none;
	padding: 0;
	margin: 0; 
	display:grid;
	background-color: #feeaf3;
	border-radius: 2em;
	margin:1em ;
	justify-content: center;
	align-items: center;
	
}

.comboOffers li{
	display: grid;
	grid-template-rows: auto auto;
	align-items: center;
	margin-bottom: 3em;
	background-color: white;
	border-radius: 2em;
	margin: 1em ;
	
	
}

.comboOffers li img{
    grid-column-start: 1;
    grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 5;
	width: fit-content;
	height: 5em;
	margin-right: 2em;
}

.comboOffers li p{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	margin-bottom: 0.5em;
}
.comboOffers li .prijs{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
}

.comboOffers li h3{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}
.comboOffers li .tijd{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	
}


.eten-menu{
	list-style: none;
	padding: 0;
	margin: 0; 
	display:grid;
}

.eten-menu li{
	display: grid;
	grid-template-rows: auto auto;
	align-items: center;
	margin-bottom: 3em;
	border: 2em;
	border-color: darkgrey;
	border-radius: 2em;
	background-color: white;
	border-color: grey ;
	border: 2em;
	padding: 1.5em;
	
}

.eten-menu li img{
    grid-column-start: 1;
    grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	width: fit-content;
	height: 5em;
	margin-left: 2em;
	margin-right: 1em;
}

.eten-menu li p{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	margin-bottom: -2em ;
}
.eten-menu li .prijs{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.eten-menu li h3{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

 /* hulp van chatgpt prompt:hoe maak ik een scroll animatie dat 
	de tekst tevoorschijn komt als je scrollt? */
.vervagen{
	opacity: 0;            
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .vervagen.zichtbaar {
	opacity: 1;           
	transform: translateY(0); 
  }

 
  body.darkmode{
    background-color: aquamarine;
	color: black
  }

  #togglebutton{
	padding: 1em;
	margin-top: 2em ;
	border-radius: 1.5em;
	cursor: pointer;
  }
span{
	color: #f7c1d9;
}

.carousel{
	display: flex;
	flex-direction: row;
	margin-bottom: 4em ;
	
	
}
  
 

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	/* startje */
	--color-text:#111;
	--color-background:#eee;
}

footer{
background-color:rgb(37, 40, 43);
margin: 0em ;
}





/****************/
/* JOUW STYLING */
/****************/

/* jouw code */