:root{
   --letter-width:11.45vw;
   --streepje-width:calc(var(--letter-width) / 6);
}

/* code voor text animation  */

/* Letter m gemaakt samen met Sanne, deze kennis heb ik gebruikt voor mijn volgende animaties */
/* hele letter m*/


header section div:first-of-type {
	width:var(--letter-width);
	aspect-ratio:1;
	background:var(--color-background);
	
	display:flex;
	justify-content:space-between;
	
	animation-name:letter-m;
	animation-duration:4s;
	/* animation-iteration-count:2; */
	animation-timing-function:ease-in-out;
  }
/* groep losse elementen in letter m */
  header section div:first-of-type span {
	display:block;
	height:var(--letter-width);
	width:var(--streepje-width);
	background-color:var(--color-animation);
  }

/* los element letter m */
  header section div:first-of-type span:last-of-type {
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--letter-width);
	height:var(--streepje-width);
	
	animation-name:streepje-m;
	animation-duration:4s;
	/* animation-iteration-count:2; */
	animation-timing-function:ease-in-out;
  }
  
/* translate los element letter m */
@media (prefers-reduced-motion:no-preference) {
  @keyframes streepje-m {
	0% {
	  translate: 0 0;
	}
	12.5%, 25% {
	  translate: 0 calc(var(--letter-width) - var(--streepje-width));
	}
	37.5%, 50% {
	  translate: 0 0;
	}
	62.5%, 75% {
	  translate: 0 calc(var(--letter-width) - var(--streepje-width));
	}
	87.5%, 100% {
	  translate: 0 0;
	}
  }

  /* rotate groep elementen letter m (hele div) */
  @keyframes letter-m {
	0%, 12.5% {
	  rotate:0deg;
	}
	25%, 37.5% {
	  rotate:90deg;
	}
	50%, 62.5% {
	  rotate:180deg;
	} 
	75%, 87.5% {
	  rotate:270deg;
	}
	100% {
	  rotate:360deg;
	}
  }}
/* codes letter e */
header section div:nth-of-type(2){
	width:var(--letter-width);
	aspect-ratio:1;
	background:var(--color-background);
	
	display:flex;
	flex-direction: column;
	justify-content:space-between;
	
	animation-name:letter-e;
	animation-duration:4s;
	/* animation-iteration-count:1; */
	animation-timing-function:ease-in-out;
  }

header section div:nth-of-type(2) span:first-of-type{
	animation-name: eerste-streepje-e;
	animation-duration:4s;
}
header section div:nth-of-type(2) span:nth-of-type(2){
	animation-name: tweede-streepje-e;
	animation-duration:4s;
}
header section div:nth-of-type(2) span:nth-of-type(3){
	animation-name: derde-streepje-e;
	animation-duration:4s;
}


  /* streepje letter e */
  header section div:nth-of-type(2) span:last-of-type {
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--streepje-width);
	height:var(--letter-width);
	
	animation-name:streepje-e;
	animation-duration:4s;
	/* animation-iteration-count:2; */
	animation-timing-function:ease-in-out;
  }

  /* groep losse elementen letter e */
  header section div:nth-of-type(2) span {
	height:var(--streepje-width);
	width:var(--letter-width);
	background-color:var(--color-animation);
  }
  @media (prefers-reduced-motion:no-preference) {
  @keyframes streepje-e {
	0%, 99% {
		display: none;
	}
	100% {
		translate: 0 0;
	}
  }

  @keyframes letter-e {
	0%, 24% {
		rotate: -90deg;
	}
	26%, 49% {
		rotate: 0deg;
	}
	51%, 74% {
		rotate: -90deg;
	}
	76%, 100% {
		rotate: 0deg;
	}
  }
  @keyframes eerste-streepje-e {
	1%, 5% {
		opacity: 0%;
	}
	5%, 13% {
		opacity: 100%;
	}
	13%, 17% {
		opacity: 0;
	}
	17%, 26% {
		opacity: 100%;
	}
	26%, 30% {
		opacity: 0%;
	}
	30%, 38% {
		opacity: 100%;
	}
	38%, 42% {
		opacity: 0%;
	}
	42%, 51% {
		opacity: 100%;
	}
	51%, 55% {
		opacity: 0%;
	}
	55%, 63% {
		opacity: 100%;
	}
	63%, 67% {
		opacity: 0%;
	}
	67%, 76% {
		opacity: 100%;
	}
	76%, 80% {
		opacity: 0%;
	}
	80%, 88% {
		opacity: 100%;
	}
	88%, 92% {
		opacity: 0%;
	}
	92%, 100% {
		opacity: 100%;
	}
	
	
  }
  @keyframes tweede-streepje-e {
	1%, 5% {
		opacity: 100%;
	}
	5%, 9% {
		opacity: 0%;
	}
	9%, 17% {
		opacity: 100%;
	}
	17%, 21% {
		opacity: 0%;
	}
	21%, 30% {
		opacity: 100%;
	}
	30%, 34% {
		opacity: 0%;
	}
	34%, 42% {
		opacity: 100%;
	}
	42%, 46% {
		opacity: 0%;
	}
	46%, 50% {
		opacity: 100%;
	}
	55%, 59% {
		opacity: 0%;
	}
	59%, 67% {
		opacity: 100%;
	}
	67%, 71% {
		opacity: 0%;
	}
	71%, 80% {
		opacity: 100%;
	}
	80%, 84% {
		opacity: 0%;
	}
	84%, 92% {
		opacity: 100%;
	}
	92%, 96% {
		opacity: 0%;
	}
	96%, 100% {
		opacity: 100%;
	}
	
  }
  @keyframes derde-streepje-e {
	1%, 9% {
		opacity: 100%;
	}
	9%, 13% {
		opacity: 0;
	}
	13%, 21% {
		opacity: 100%;
	}
	21%, 25% {
		opacity: 0%;
	}
	25%, 34% {
		opacity: 100%;
	}
	34%, 38% {
		opacity: 0%;
	}
	38%, 46% {
		opacity: 100%;
	}
	46%, 50% {
		opacity: 0%;
	}
	50%, 59% {
		opacity: 100%;
	}
	59%, 63% {
		opacity: 0%;
	}
	63%, 71% {
		opacity: 100%;
	}
	71%, 75% {
		opacity: 0%;
	}
	75%, 84% {
		opacity: 100%;
	}
	84%, 88% {
		opacity: 0%;
	}
	88%, 96% {
		opacity: 100%;
	}
	96%, 100% {
		opacity: 0%;
	}

  }}

  /* codes letter l */

  header div:nth-of-type(3) span{
	display:block;
	height:var(--letter-width);
	width:var(--streepje-width);
	background-color:var(--color-animation);

  }

  /* horizontale streep letter l */

  header div:nth-of-type(3) span:last-of-type{
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--letter-width);
	height:var(--streepje-width);

	/* display: flex; */
	/* align-items: end; */
	
	animation-name:horizontaal-l;
	animation-duration:4s;
	/* animation-iteration-count:2; */
	animation-timing-function:ease-in-out;

  }

  /* verticale streep letter l */

  header div:nth-of-type(3) span:first-of-type{
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--streepje-width);
	height:var(--letter-width);
	
	animation-name:verticaal-l;
	animation-duration:4s;
	animation-timing-function:ease-in-out;

  }

  header div:nth-of-type(3) {
	width:var(--letter-width);
	aspect-ratio:1;
	background:var(--color-background);
	
	display:flex;
	align-items: end;
	
	/* animation-name:verticaal-l;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in-out; */
  }
  @media (prefers-reduced-motion:no-preference) {
  @keyframes horizontaal-l {
	0% {
	  translate: 0 0;
	}
	11.1%, 22.2% {
	  translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);
	}
	22.2%, 33.3% {
	  translate: 0 calc((var(--letter-width) - var(--streepje-width))*-1);
	}
	33.3%, 44.4% {
	  translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1)
	}
	44.4%, 55.5% {
	  translate: 0 calc((var(--letter-width) - var(--streepje-width))*-1);
	}
	55.5%, 66.6% {
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);
	}
	66.6%, 77.7% {
		translate: 0 0;
	}
	77.7%, 88.8%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);
	}
	88.8%, 100% {
		translate: 0 0;
	}
  }

@keyframes verticaal-l {
	0% {
		translate: 0 0;
	  }
	  11.1%, 22.2% {
		translate: calc((var(--letter-width) - var(--streepje-width)) / 2) 0;
	  }
	  22.2%, 33.3% {
		translate: calc(var(--letter-width) - var(--streepje-width)) 0;
	  }
	  33.3%, 44.4% {
		translate: calc((var(--letter-width) - var(--streepje-width)) / 2) 0;
	  }
	  44.4%, 55.5% {
		translate: calc(var(--letter-width) - var(--streepje-width)) 0;
	  }
	  55.5%, 66.6% {
		  translate: calc((var(--letter-width) - var(--streepje-width)) / 2) 0;
	  }
	  66.6%, 77.7% {
		  translate: 0 0;
	  }
	  77.7%, 88.8%{
		  translate: calc((var(--letter-width) - var(--streepje-width)) / 2) 0;
	  }
	  88.8%, 100% {
		  translate: 0 0;
	  }

}}

header div:nth-of-type(4){
	width:var(--letter-width);
	aspect-ratio:1;
	background-color: var(--color-background);
	
	display:grid;
	align-items: center;
	
	animation-name:letter-k;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
}

header div:nth-of-type(4) span:last-of-type{
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--streepje-width);
	height:var(--letter-width);

	animation-name:verticaal-k;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
	
}
header div:nth-of-type(4) span{
	height:var(--streepje-width);
	width:var(--letter-width);
	background-color:var(--color-animation);

}

header div:nth-of-type(4) span:first-of-type{
	position: absolute;
	transform: skewY(-20deg);
	animation-name: eerste-streepje-k;
	background-color: var(--color-animation);
	transform-origin: left bottom;
	animation-duration: 4s;

}
header div:nth-of-type(4) span:nth-of-type(2){
	position: absolute;
	transform: skewY(20deg);
	animation-name: tweede-streepje-k;
	background-color: var(--color-animation);
	transform-origin: left top;
	animation-duration: 4s;
	
}
@media (prefers-reduced-motion:no-preference) {
@keyframes verticaal-k{
	0%, 12.5% {
		translate:calc(var(--letter-width) - var(--streepje-width)) 0;
	}
	12.5%, 25% {
		translate: 0 0;
	}
	25%, 37.5% {
		translate:calc(var(--letter-width) - var(--streepje-width)) 0;
	}
	37.5%, 50% {
		translate: 0 0;
	}
	50%, 62.5% {
		translate:calc(var(--letter-width) - var(--streepje-width)) 0;
	}
	62.5%, 75% {
		translate: 0 0;
	}
	75%, 87.5% {
		translate:calc(var(--letter-width) - var(--streepje-width)) 0;
	}
	87.5%, 100% {
		translate: 0 0;
	}
}

@keyframes eerste-streepje-k {
	0%, 12.5% {
		translate: 0 calc(var(--letter-width) / 2);
	}
	12.5%, 25% {
		translate: 0 0;
	}
	25%, 37.5% {
		translate: 0 calc(var(--letter-width) / 2);
	}
	37.5%, 50% {
		translate: 0 0;
	}
	50%, 62.5% {
		translate: 0 calc(var(--letter-width) / 2);
	}
	62.5%, 75% {
		translate: 0 0;
	}
	75%, 87.5% {
		translate: 0 calc(var(--letter-width) / 2);
	}
	87.5%, 100% {
		translate: 0 0;
	}
}
@keyframes tweede-streepje-k {
	0%, 12.5% {
		translate: 0 calc((var(--letter-width) / 2)*-1);
	}
	12.5%, 25% {
		translate: 0 0;
	}
	25%, 37.5% {
		translate: 0 calc((var(--letter-width) / 2)*-1);
	}
	37.5%, 50% {
		translate: 0 0;
	}
	50%, 62.5% {
		translate: 0 calc((var(--letter-width) / 2)*-1);
	}
	62.5%, 75% {
		translate: 0 0;
	}
	75%, 87.5% {
		translate: 0 calc((var(--letter-width) / 2)*-1);
	}
	87.5%, 100% {
		translate: 0 0;
	}
}}
/* letter w */
header section div:nth-of-type(5){
	width:var(--letter-width);
	aspect-ratio:1;
	background-color: var(--color-background);
	
	display:flex;
	justify-content:space-between;
	align-items: end;
	
	animation-name:letter-w;
	animation-duration:4s;
	animation-timing-function:ease-in-out;

}

/* streepjes letter w */
header section div:nth-of-type(5) span{
	display:block;
	height:var(--letter-width);
	width:var(--streepje-width);
	background-color:var(--color-animation);
}

/* liggend streepje letter w */
header section div:nth-of-type(5) span:last-of-type{
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--letter-width);
	height:var(--streepje-width);
	
	animation-name:streepje-w;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
}
@media (prefers-reduced-motion:no-preference) {
@keyframes letter-w {
	0%, 12.5% {
		rotate:0deg;
	  }
	  25%, 37.5% {
		rotate:90deg;
	  }
	  50%, 62.5% {
		rotate:180deg;
	  } 
	  75%, 87.5% {
		rotate:270deg;
	  }
	  100% {
		rotate:360deg;
	  }
	
}


@keyframes streepje-w{
	0% {
		translate: 0 0;
	  }
	  12.5%, 25% {
		translate: 0 calc((var(--letter-width) - var(--streepje-width))*-1);
	  }
	  37.5%, 50% {
		translate: 0 0;
	  }
	  62.5%, 75% {
		translate: 0 calc((var(--letter-width) - var(--streepje-width))*-1);
	  }
	  87.5%, 100% {
		translate: 0 0;
	  }

}}

/* letter e-2 */
header section div:nth-of-type(6){
    width:var(--letter-width);
	aspect-ratio:1;
	background:var(--color-background);
	
	display:flex;
	flex-direction: column;
	justify-content:space-between;
	
	animation-name:letter-e-2;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
}

 /* streepje letter e-2 */
 header section div:nth-of-type(6) span:last-of-type {
	position:absolute;
	background-color:var(--color-animation);
	
	width:var(--streepje-width);
	height:var(--letter-width);
	
	animation-name:streepje-e-2;
	animation-duration:4s;
	animation-timing-function:ease-in-out;
  }

  /* streepjes letter e-2 */
  header section div:nth-of-type(6) span {
	height:var(--streepje-width);
	width:var(--letter-width);
	background-color:var(--color-animation);
  }
  header section div:nth-of-type(6) span:first-of-type{
	animation-name: eerste-streepje-e-2;
	animation-duration:4s;
}
header section div:nth-of-type(6) span:nth-of-type(3){
	animation-name: derde-streepje-e-2;
	animation-duration:4s;
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes streepje-e-2{
	0%, 99% {
		display: none;
	}
	90%, 100% {
		translate: 0 0;
	}

  }

  @keyframes letter-e-2{
	0%, 18%{
		rotate:90deg;
	}
	22%, 48%{
		rotate:180deg;
	}
	52%, 78%{
		rotate:270deg;
	}
	82%, 100%{
		rotate:360deg;
	}
	100%{
		rotate: 360deg;
	}
  }

  @keyframes eerste-streepje-e-2 {
	0%, 8%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2));

	}
	12%, 16%{
		translate: 0 0;

	}
	32%, 38%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2));

	}
	42%, 46%{
		translate: 0 0;

	}
	62%, 68%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2));

	}
	72%, 76%{
		translate: 0 0;

	}
	82%, 96%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2));

	}
	100%{
		translate: 0 0;

	}
	/* 96.8335%, 100%{
		translate: 0 0;

	} */


	
  }
  @keyframes derde-streepje-e-2 {
	0%, 8%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);

	}
	12%, 16%{
		translate: 0 0;

	}
	32%, 38%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);

	}
	42%, 46%{
		translate: 0 0;

	}
	62%, 68%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);

	}
	72%, 76%{
		translate: 0 0;

	}
	82%, 96%{
		translate: 0 calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1);

	}
	100%{
		translate: 0 0;

	}
  }	
}

/* letter g  */
header section div:nth-of-type(7){
	width:var(--letter-width);
	aspect-ratio:1;
	background:var(--color-background);
	
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
	
	animation-name:letter-g;
	animation-duration:4s;
	animation-timing-function:ease-in-out;

}

header section div:nth-of-type(7) span:first-of-type, 
header section div:nth-of-type(7) span:last-of-type{
	width:var(--letter-width);
	height: var(--streepje-width);
	background-color:var(--color-animation);

	grid-column: 1 / 3;
}
header section div:nth-of-type(7) span:first-of-type{
	grid-row: 1;

	animation-name:horizontaal-boven-g;
	animation-duration: 4s;
}
header section div:nth-of-type(7) span:last-of-type{
	grid-row: 2;
	align-self: end;

	animation-name: horizontaal-onder-g;
	animation-duration: 4s;
}

header section div:nth-of-type(7) span:nth-of-type(2){
    width: var(--streepje-width);
	height: var(--letter-width);
	background-color: var(--color-animation);

	grid-column: 1;
	grid-row: 1 / 3;

	animation-name: verticaal-links-g;
	animation-duration: 4s;

}
header section div:nth-of-type(7) span:nth-of-type(3){
	height: var(--streepje-width);
	width: calc( var(--letter-width) / 2);
	background-color: var(--color-animation);

	grid-row: 2 / 3;
    grid-column: 2 / 3;
	translate: 0 calc( (var(--streepje-width) / 2)*-1);

	animation-name: horizontaal-klein-midden-g;
	animation-duration: 4s;

}


header section div:nth-of-type(7) span:nth-of-type(4){
	width: var(--streepje-width);
	height:calc( var(--letter-width) / 2);
	background-color: var(--color-animation);

	grid-column: 2;
    grid-row: 2 / 3;
    justify-self: end;

	animation-name: verticaal-rechts-klein-g;
	animation-duration: 4s;
}
@media (prefers-reduced-motion:no-preference) {
@keyframes horizontaal-boven-g{
	0%, 20%{
		transform:translate(0, 0);
	}
	20%, 40%{
		transform:translate( 0, calc(((var(--letter-width) - var(--streepje-width)) / 2)));
	}
	40%, 60%{
		transform:translate( 0, calc((var(--letter-width) - var(--streepje-width)) ));
	
	}
	60%, 80%{
		transform:translate(0, calc(((var(--letter-width) - var(--streepje-width)) / 2) ));
	}
	80%, 100% {
		transform:translate(0, 0);
	}

}

@keyframes verticaal-links-g {
	0%, 20%{
		transform:translate(0, 0);
	}
	20%, 40%{
		transform:translate( calc(((var(--letter-width) - var(--streepje-width)) / 2)), 0);
	}
	40%, 60%{
		transform:translate( calc((var(--letter-width) - var(--streepje-width)) ), 0);
	
	}
	60%, 80%{
		transform:translate(calc(((var(--letter-width) - var(--streepje-width)) / 2) ), 0);
	}
	80%, 100% {
		transform:translate(0, 0);
	}

	
}

@keyframes horizontaal-klein-midden-g {
	0%, 20%{
		transform:translate(0, 0);
	}
	20%, 40%{
		transform:translate( calc(((var(--letter-width) - var(--streepje-width)) / 4)*-1), 0);

	}
	40%, 60%{
		transform:translate( calc(((var(--letter-width)) / 2)*-1), 0);
		
	}
	60%, 80%{
		transform:translate( calc(((var(--letter-width) - var(--streepje-width)) / 4)*-1), 0);
		
	}
	80%, 100% {
		transform:translate(0, 0);
	}
	
}

@keyframes verticaal-rechts-klein-g {
	0%, 20%{
		transform:translate(0, 0);
	}
	20%, 40%{
		transform:translate( calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1), 0);
	}
	40%, 60%{
		transform:translate( calc((var(--letter-width) - var(--streepje-width))*-1 ), 0);
	
	}
	60%, 80%{
		transform:translate(calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1), 0);
	}
	80%, 100% {
		transform:translate(0, 0);
	}
	
}

@keyframes horizontaal-onder-g {
	0%, 20%{
		transform:translate (0, 0);
	}
	20%, 40%{
		transform:translate( 0, calc(((var(--letter-width) - var(--streepje-width)) / 2)*-1));
	}
	40%, 60%{
		transform:translate( 0, calc((var(--letter-width) - var(--streepje-width)) *-1 ));
	
	}
	60%, 80%{
		transform:translate(0, calc(((var(--letter-width) - var(--streepje-width)) / 2) *-1));
	}
	80%, 100% {
		transform:translate(0, 0);
	}

	
}}



 
  header section{
	display: flex;
	flex-direction: row;
	gap: .3em;
	margin: .5em 0 1.5em 0;
	height: var(--letter-width);
	width: 100%;
  }
/* jouw code */
h1{
	text-transform: uppercase;
	display: flex;
    justify-content:space-between;
	font-size: 4.2em;
	/* font-weight: 300; */
	font-family: var(--font-Melkweg);
	width: 100%;
}
header:first-of-type{
	padding: 1em;
}
/* header nav:first-of-type a{
	display: flex;
	margin-right: auto;
} */

 /* code voor de header */
header nav:first-of-type a:nth-of-type(2),
header nav:first-of-type a:nth-of-type(3){
	/* display: none; */
}
header p, header a, header nav {
	text-transform: uppercase;
	list-style-type: none;
	font-size: 1.875rem;
	
}
header nav:first-of-type li{
	list-style-type: none;
	
	
}
/* header nav:first-of-type{
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: relative;
	background-color: var(--color-background-2);
} */

header nav:first-of-type a{
	color: var(--color-text-2);

}

header ul {
	line-height: 1;
	font-size: 1.875rem;
}

header nav:nth-of-type(2) a {
	text-decoration: underline .06em;
	color: #111;
}
header nav:nth-of-type(2) a:hover {
	text-decoration: none;

}
header nav:nth-of-type(2){
	font-size: 1.875rem;
}

section li {
	list-style-type: none;
}


/* code eerste sectie */

main section:first-of-type {
	display: grid;
	justify-content: center;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 1em;
	row-gap: 4em;
	background-color: #111;
	position: relative;
	padding: 2em 1em 4em 1em;
	
}

section:first-of-type article{
	display: grid;
	align-content: center;
	z-index: 10;
	/* overflow: hidden; */

}
section:first-of-type a{
	text-decoration: none;
	color:#eee;
	display: grid;
	/* overflow: hidden; */
	/* width: 9em; */
	/* object-fit: cover; */
}
main section:first-of-type div{
	display: flex;
	order: -10;
	overflow: hidden;
}
/* section:first-of-type div{
	display: grid;
} */
section:first-of-type article img{
	object-fit: cover;
	transition: transform 1000ms;
	overflow: hidden;
	width: 100%;
}

/* overflow: clip; */
section:first-of-type article img:hover{
	 transform:scale(1.2);
 
}

section:first-of-type article p{
	order: -5;
	font-weight: 300;
	font-family: var(--font-Melkweg);
	
}
section:first-of-type article h3{
	font-weight: 300;
	
}

section:nth-of-type(1) article:nth-of-type(1), 
section:nth-of-type(1) article:nth-of-type(4),
section:nth-of-type(1) article:nth-of-type(7), 
section:nth-of-type(1) article:nth-of-type(10){
	grid-column: 1 / 3;
}
/* begint bij het begin van colom 1 en eindigt bij het begin van kolom 3 */

section:nth-of-type(1) article:nth-of-type(2),
section:nth-of-type(1) article:nth-of-type(5),
section:nth-of-type(1) article:nth-of-type(8){
	grid-column: 3 / 5;
}
section:nth-of-type(1) article:nth-of-type(3),
section:nth-of-type(1) article:nth-of-type(6),
section:nth-of-type(1) article:nth-of-type(9){
	grid-column: 2 / 4;
}

/* backgound image grid */

section:first-of-type ul{
	display: grid;
	z-index: 5;
	position: absolute;
	row-gap: 8em;
	padding-top: 9em;
	width: 100%;
}
section:first-of-type ul img{
	width: 42.5vw;
	opacity: 50%;
}

section:first-of-type li:first-of-type,
section:first-of-type li:nth-of-type(4){
	grid-column: 1 / 3;
}
section:first-of-type li:nth-of-type(2),
section:first-of-type li:nth-of-type(5){
	grid-column: 2 / 4;
}
section:first-of-type li:nth-of-type(3),
section:first-of-type li:nth-of-type(6){
	grid-column: 3 / 5;
}


/* codes sectie twee */

section:nth-of-type(2) ul{
	display: flex;
	flex-direction: column;
	justify-content: end;
	gap: 1em;
}
section:nth-of-type(2) ul p:first-of-type{
	color: var(--color-p-grey);
	font-size: .875rem;
	padding-bottom: 1em;
	/* row-gap: 1em; */
}

section:nth-of-type(2) ul p:nth-of-type(2){
	font-family: 'Melkweg', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	justify-self: end;
	text-align: right;
	font-size: .875rem;
	max-width: 9ch;
	row-gap: 1em;
	
}
section:nth-of-type(2) li{
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 1em;
	border-bottom: .07em solid rgb(209, 211, 212);
}

section:nth-of-type(2) li:hover{
	
	h4, p:nth-of-type(2){
		text-decoration: underline solid .1em var(--color-text);
	}
	p:first-of-type{
		text-decoration: underline solid .1em var(--color-p-grey);
	}
}
section:nth-of-type(2) ul :nth-of-type(2){
	order: -5;
	/* display: none; */
}

section:nth-of-type(2) ul h4{
	order: -10;
	font-size: 1rem;
	width: 160%;
}
section:nth-of-type(2){
	padding: 2em 1em 1em 1em;
}
section:nth-of-type(2) h2{
	font-size: 2.625rem;
	font-family: 'Melkweg';
}
/* button{
	text-decoration: none;
	border: none;
	background-color: var(--color-buttonbackground);
	text-transform: uppercase;
	padding-bottom: 1em;
	width: 50vw;

} */
section:nth-of-type(2) header label:first-of-type{
	grid-row: 1 / 2;
	
}
section:nth-of-type(2) header label:last-of-type{
	grid-row: 2 / 3;
	
}

#nextUp, #justAnnounced{
	display: none;
}
section:nth-of-type(2) header{
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 1.4em;
	border-bottom: .1em solid #111;
	padding-bottom: 1em;
	margin-bottom: 1em;
	width: 100%;
}

section:nth-of-type(2) header h3{
	font-size: .875rem;
}
section:nth-of-type(2) h2{
	grid-column: 1 / -1;
	
}

/* codes sectie 3 */

section:nth-of-type(3){
	padding: 2em 1em 0 1em;
}
section:nth-of-type(3) a{
	display: grid;
	order: -10;
}

section:nth-of-type(3) li{
	display: grid;
}
section:nth-of-type(3) img{
	width: 100%;
}
section:nth-of-type(3) h2{
	font-size: .875rem;
	border-bottom: .1em solid #111;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	font-weight: 700;
}
section:nth-of-type(3) h3{
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
	padding-bottom: 1.5em;
}
section:nth-of-type(3) p{
	font-size: 1.125rem;
	font-family: var(--font-Melkweg);
	order: -5;
	padding-top: .8em;
}



/* codes sectie 4 */

section:nth-of-type(4){
	padding: 1em;
	border-bottom: .1em solid var(--color-text);
	border-top: .1em solid var(--color-text);
	flex-direction: row;

}
section:nth-of-type(4):hover{
	background-color: var(--color-text);
	transition: .25s;
	h2{
		color: #fff;
	}	
	svg path{
		stroke: #fff;
	}
}


section:nth-of-type(4) a{
	text-decoration: none;
	display: flex;
	justify-content: space-between;
}
section:nth-of-type(4) h2{
	font-family: var(--font-Melkweg);
	font-size: 3.4rem;
	color: var(--color-text);
}
/* section:nth-of-type(4) h2:hover{
	color: var(--color-buttonbackground);
} */

section:nth-of-type(4) img{
	height: 3em;
	
}


/* codes sectie 5 */

section:nth-of-type(5){
	padding: 2.5em 1em 7em 1em;
	display: grid;
	gap: 1.5em;
}
section:nth-of-type(5) h2{
	font-family: var(--font-Melkweg);
	font-size: 3.3rem;

}
section:nth-of-type(5) > img{
	width: 100%;
	order: -10;
}
section:nth-of-type(5) p{
	line-height: 1.35rem;
	font-size: 1.125rem;
	font-weight: 300;
}
/* section:nth-of-type(5) a{
	text-decoration: none;
	color: #111;
	display: flex;
	flex-direction: row;
	align-items: end;
	

} */
section:nth-of-type(5)>a{
	display: flex;
	flex-direction: row;
	align-items: end;
	text-decoration: none;
    color: #111;
	gap: 1em;
    
}

section:nth-of-type(5)>a:hover{
	text-decoration: underline solid var(--color-text) .1em;
}



/* header home pagina responsive */
@media(width > 40em){
	header nav:first-of-type a:nth-of-type(2),
    header nav:first-of-type a:nth-of-type(3){
		list-style-type: none;
		color: var(--color-text);
	}

	header nav:first-of-type{
		background-color: var(--color-background);
		order: -5;
		position: relative;
		padding: 0 .5em;
	}	
	header nav:nth-of-type(2){
		order: -10;
	}
	
}


/* eerste sectie responsive */
@media ( width > 40em) {
	main section:first-of-type {
		display: grid;
		justify-content: center;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		column-gap: 3em;
		row-gap: 8.3125em;
		background-color: #111;
		position: relative;
		padding: 6em 1.5em 8em 1.5em;
		
	}
	section:nth-of-type(1) article:nth-of-type(1),
	section:nth-of-type(1) article:nth-of-type(6){
		grid-column: 1 / 3;
	}
	section:nth-of-type(1) article:nth-of-type(4),
	section:nth-of-type(1) article:nth-of-type(9){
		grid-column: 2 / 4;
	}
	section:nth-of-type(1) article:nth-of-type(2),
	section:nth-of-type(1) article:nth-of-type(7){
		grid-column: 3 / 5;
	}
	section:nth-of-type(1) article:nth-of-type(5),
	section:nth-of-type(1) article:nth-of-type(10){
		grid-column: 4 / 6;
	}
	section:nth-of-type(1) article:nth-of-type(3),
	section:nth-of-type(1) article:nth-of-type(8){
		grid-column: 5 / 7;
	}
	header nav:first-of-type{
		height: 2em;
        background-color: var(--color-background);
        align-items: center;
	}
	header nav:first-of-type > div {
        background-color: var(--color-background);
    }
	header nav:first-of-type svg:first-of-type {
        stroke: var(--color-text);
        height: .7em;
    }
	header nav:first-of-type > div span {
		width: .7em;
		height: .08em;
		background-color: var(--color-animation);
	}
	header nav:first-of-type a:nth-of-type(2), header nav:first-of-type a:nth-of-type(3) {
        display: contents;
        color: var(--color-text);
        font-size: .875rem;
		text-transform: capitalize;
    }
	header section:first-of-type{
		order: -15;
	}
	header{
		display: flex;
		flex-direction: column;
		padding: 1.5em 1.5em 0 1.5em;
	}
	header section{
		gap: .7em;
	}
	section:first-of-type ul{
		display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        column-gap: 3em;
        row-gap: 6em;
        padding-top: 0;
	}
	section:first-of-type ul img {
		width: 30vw;
		opacity: 50%;
	}
	
	
	section:nth-of-type(1) ul li:nth-of-type(1){
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	section:nth-of-type(1) ul li:nth-of-type(2){
		grid-column: 3 / 5;
		grid-row: 2 / 3;
	}
	section:nth-of-type(1) ul li:nth-of-type(3){
		grid-column: 5 / 7;
		grid-row: 3 / 4;
	}
	section:nth-of-type(1) ul li:nth-of-type(4){
		grid-column: 1 / 3;
		grid-row: 4 / 5;
	}
	section:nth-of-type(1) ul li:nth-of-type(5){
		grid-column: 3 / 5;
		grid-row: 5 / 6;
	}
	section:nth-of-type(1) ul li:nth-of-type(6){
		grid-column: 5 / 7;
		grid-row: 6 / 7;
	}
	section:nth-of-type(1) ul li:nth-of-type(7){
		grid-column: 1 / 3;
		grid-row: 7 / 8;

	}

}



@media(width > 60em){
	main section:first-child{
		padding: 6em 2em 8em 2em;

	}	

}

/* responsiveness: programma en highlights naast elkaar */
@media(width > 60em){
	main section:nth-of-type(2),
	main section:nth-of-type(3){
		width: 50%;

	}
	main section:nth-of-type(2){
		float: left;
		padding: 2em 2em 2em 2em;
	}
	main section:nth-of-type(3){
		float: right;
		padding: 6em 2em 0 2em;
	}
	main section:nth-of-type(4){
		width: 100%;
		float: inline-end;
		padding: 2em;
	}
	main section:nth-of-type(5){
		width: 100%;
		display: grid;
		grid-template-columns: 40% 1fr;
		grid-template-rows: auto;
		align-items: baseline;

	}
	main section:nth-of-type(5) img{
		grid-row: 1/-1;
		
	}
	section:nth-of-type(5) p {
		grid-column: 2/3;
	}
	header section{
		gap: 1.2em;
	}
	/* header nav:first-of-type{
		order: -10;
	} */
	header{
		display: grid;
		grid-template-columns: repeat(2, auto);

	}
	header section{
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	header nav:first-of-type{
		grid-column: 2 / 3;

	}
	header nav:last-of-type{
		grid-column: 1 / 2;
	}

	}