/*--GENERAL STYLING--*/
html{
	height: 100%;
	scroll-behavior: smooth;
	}

/*--COLORSCHEME-AND-FONTS--*/

/*--COLORSCHEME--*/
:root{
    --white:#ffffff;
    --black:#000000;
    --green:#64d22a;
    --ultimate-gray:#939597;
    --dark-gray:rgba(37,36,36,1.00);
    --dark-blue:#0d1885;
  }
:root{
	box-sizing: border-box;
	background-color:var(--dark-gray);
}
::before,::after{
	box-sizing:border-box;
}
/*--FONTS-AND-TYPOGRAPHY--*/
body{
	margin:0 auto;
	width:100%;
	min-height: 100dvh;
	min-height: 100svh;
	overflow-x: hidden;
	font-family: "Archivo", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	color:var(--dark-gray);
}
h1{
    font-family: "Barlow Black",sans-serif;
    font-size: clamp(20px,8vw,72px);
}
h2, h3{
	font-weight: 500;
	color:var(--white);
}
h2{font-size: clamp(24px,3.1vw,36px);}
h3{font-size: clamp(18px,2.3vw,28px);}
p, li{line-height: 1.25rem;}

a{  font-weight: 700;
    color:var(--white);
    text-decoration: none;
}
strong{
	color:var(--dark-blue);	
}

img{
	width:100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/*--SPECIFIC STYLING--*/

.grid-container{
		position: relative;
		margin-inline:auto;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		}

header{ position: fixed;
		grid-column: span 12;
		display: grid;
		grid-template-columns:2fr 8fr;
		padding:1rem;
		background-color: var(--dark-gray);
}
header .praktijkinfo{
		grid-column: span 12;
		display: flex;
		flex-wrap: wrap;
		gap:0.75rem;
		}
header .praktijkinfo ul{
		display: flex;
		flex-wrap: wrap;
		gap:0.75rem;
		list-style: none;
		color:var(--ultimate-gray);		
}
header .logo{
		grid-column:span 1 ;
		width:100%;
		max-width:150px;
		}
header nav{
		grid-column:span 6;
		margin:auto;
		display: flex;
		flex-wrap: wrap;
		gap:0.5rem;	
		}	
header nav li button{
				width:20ch;
				padding: 0.5rem 1rem;
				background-color: var(--dark-blue);
				border: 1px solid var(--green);
				text-align: center;
				position: relative;
			}
			button:hover{
				background-color: var(--green);
			}
			button:hover .dropdown{display: block;}

			.dropdown{
				display: none;
				list-style: none;
				text-align: left;
				background-color: var(--green);
				box-shadow: 0 2px 5px 2px var(--dark-gray);
				padding-top:1rem;
				position: absolute;
			}
			.dropdown li{
				font-weight: 500;
				color:var(--dark-blue);
				padding:0.5rem 0.5rem 0.5rem 1rem;
				cursor: pointer;	
			}
			.dropdown li:hover{
				color:var(--white);
				background-color: var(--dark-blue);
			}


/*--STYLING HOMEPAGE-HEADER-HEROSECTION-FOOTER--*/

main{
	width:100vw;
	margin:auto;
	padding:25vw 3vw 1.5vw 3vw;
	background-color:var(--dark-gray);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
	justify-content: center;
	}
		.hero{
		grid-column: span 11;
		max-width: 94vw;
		padding-bottom: 3rem;
		background-image:url( "images/Koolhydraatarm_recept_kipfilet_met_verse_groenten-ShakePlus-WEB.png");
		background-size:cover;
		background-position: center;
		background-repeat: no-repeat;
		background-blend-mode:overlay;
		border-radius: 40px 5px 20px 40px;
		border: 2px solid var(--green);
		display: grid;
		justify-content: center;
		}
		.hero-title-card{
			max-width:70vw;
			margin-top:-2rem;
			text-align: start;
			color:var(--green);
		}
		.hero-subtitle-card{
			max-width:40vw;
			margin:-2rem auto 0 3rem;
			padding-left:2.5rem;
			padding-top: 1px;
			color:var(--white);
			background-color: var(--dark-gray);
			border-radius:20px;
			border-top: 2px solid var(--green);
		}
		.hero-text-card{
			max-width:60vw;
			margin-top: -1.5rem;
			padding: 1rem;
			background-color: var(--dark-gray);
			border-radius: 5px 40px 20px 40px;
			border: 2px solid var(--green);
			
		}
		.hero-text-card h3,.hero-text-card p {
			color:var(--ultimate-gray);
		}
		.autograph{
			display: inline-flex;
			padding: 0 30%;
		}
		.autograph img{
			max-width:30px;
			margin: 0 1rem;
		}

footer{
		grid-column: span 12;
	 	width:100%;
	 	background-color: var(--dark-gray);
	 	color:var(--ultimate-gray);
	 	display: flex;
		flex-wrap: wrap;
		gap:1rem;
	 	align-self: center;
		align-content: center;
		justify-content: center;
}
.footer-logosectie{
		padding-top: 1rem;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
}
footer img{
		max-width:200px;
}
.footer-infosectie{
		align-content: center;
}
.footer-infosectie ul{
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap:0.75rem;		
}

/*-----STYLING-PAGES-----*/

.wit-voettekstje{
	color:var(--white);
}

.contentbox, .card-container{
	margin: 0 auto 1rem auto;
	grid-column: span 11;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap:1rem;
	justify-content: center;
	align-content: center;
}
.content-topvisual{
	grid-column: span 8;
}
.content-topvisual img{
	aspect-ratio:1/0.73;
	border-radius: 40px 5px 20px 40px;
	border: 2px solid var(--green);	
}
.content-toptext{
	grid-column: span 4;
	color:var(--ultimate-gray);
	background-color: var(--dark-gray);
	border-radius: 5px 40px 20px 40px;
	border: 2px solid var(--green);
	padding: 0.5rem 1rem 1rem 1rem;	
}
.content-tipcard{
	grid-column:span 3;
	padding:1rem;
	border-radius: 40px 5px 20px 40px;
	border: 2px solid var(--green);
	color:var(--ultimate-gray);
	background-color: var(--dark-gray);
	align-items: center;
	justify-content: center;
	text-align: center;
}
.content-textcard{
	grid-column:span 9;
	color:var(--white);
	background-color: var(--ultimate-gray);
	border-radius: 5px 40px 20px 40px;
	border: 2px solid var(--green);
	padding: 0.5rem 1rem 1rem 1rem;
}
.content-card-FW{
	width:100%;
	grid-column: 2/span 10;
	color:var(--white);
	text-align: center;
}
.spotcard{
	grid-column: span 4;
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-content: center;
	border-radius: 40px 5px 20px 40px;
	border: 2px solid var(--green);		
}
.spotcard img{
	width: 100%;
	aspect-ratio:1/1;	
}
.spotcard h3{
	padding-left: 1rem;
}
.day{
	color: var(--dark-gray);
	background-color: var(--ultimate-gray);
}
.night{
	background-color: var(--dark-blue);
	color:var(--white);
	}
.night strong{
	color:var(--white);
}
.night ul{
	list-style: none;
	margin-left:-1rem;
}
.listbox2{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
}

.listbox3{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
}

.logocard{
	grid-column: span 4;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 5rem 1fr 6rem;
	justify-content: center;
	align-content: center;
	padding-bottom: 2rem;
	border-radius: 40px 5px 20px 40px;
	border: 2px solid var(--green);
	background-color: var(--ultimate-gray);
}
.logocard-title{
	padding-left:2rem;
	width:100%;
	height:20%;
}
.logocard-image{
	margin-top:1rem;
	width:100%;
	height:50%;
}
.logocard-action{
	padding: 0 1rem;
}
.logocard button{
	margin: 1rem auto;
	background-color: var(--dark-blue);
}
.logocard button:hover{
	background-color: var(--green);
}

/*------MEDIAQUERY-SMALL-BIG----*/

/*--<600px--*/
@media only screen and (max-width:600px){
	.grid-container{
		grid-template-columns: 1fr;
	}
	header{
		grid-template-columns: 1fr;
		position: relative;
	}
	header .praktijkinfo{
		grid-column: span 1;
		grid-row: 1/span 1;
		margin:auto;
	}
	header .logo{
		grid-column: span 1;
		grid-row:2/span 1;
		margin: auto auto 1rem auto;	
	}
	main{
		margin-top:-4rem;
		max-width: 90vw;
	}
	main .hero-title-card{
		margin: 0.25rem auto 2rem auto;
	}
	main .hero-subtitle-card{
		margin: -2.5rem auto 1rem auto;
	}
	.contentbox, .card-container{
		display: grid;
		grid-template-columns:1fr;
		justify-content: center;
		align-content: center;
	}
	.content-topvisual, .content-toptext, .content-tipcard, .content-textcard, .spotcard, .logocard{
		grid-column:span 11;
		width:100%;
	}
	.listbox2, .listbox3{
		grid-template-columns: repeat(2,1fr);
	}
}

/*--1250px>--*/
@media only screen and (min-width:1250px){
	main{
		padding-top:12rem;
	}
	.hero-title-card{
		max-width:64vw;
	}
	.hero-subtitle-card{
		width:21vw;
	}
	.hero-text-card{
		width:43vw;
	}
	.card-container{
		gap:4rem;
	}
}