/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	color-scheme: light dark;

	/* text kleuren */
    --color-text: light-dark (#fff, #1a2129);
    /* --color-text_reverse: light-dark (#1a2129, #fff); */
	/* --color-secondary-text: light-dark (#4e565f, #b5bfca); */
	
	/* achtergrond kleuren */
	/* --color-background: light-dark (#fff, #00131a); */
	/* --color-background_reverse: light-dark (#00131a, #fff); */
	/* --color-elevated-background: light-dark (#a0a4a9, #1a2129); */
	/* --color-extra-background: light-dark (#00131A1F, #001D2629); */


	--color-stroke: #2e3a47;

	--color-extra: #00b6f0;
	--color-extra-secondary: #fe4a49;
	--color-ster: #ffa600;


	/* margins en paddings */
	--padding-small: 0.5rem;
	--padding-medium: 1rem;
	--padding-large: 1.5rem;
	--padding-extralarge: 2rem;
	

	/* font sizes */
	--fontsize-xxs: 0.7rem;
	--fontsize-xs: 0.8rem;
	--fontsize-s: 0.9rem;
	--fontsize-m: 1rem;
	--fontsize-l: 1.5rem;
	--fontsize-xl: 3rem;

}

/* in verschillende media gedaan omdat de light-dark( #, #) manier niet werkte in mijn browser */
@media (prefers-color-scheme: light) {
	:root {
		--color-secondary-text: #4e565f;

		--color-text_reverse: #fff;
		--color-background:#fff;
		--color-background_reverse:#00131a;
		
		--color-elevated-background: #f0f0f0;
		--color-extra-background: #d2f1fc69;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-secondary-text: #b5bfca;

		--color-text_reverse:#1a2129;
		--color-background: #00131a;
		--color-background_reverse:#fff;
		--color-elevated-background: #1a2129;
		--color-extra-background:#012733;
	}
}


body{
    color: var(--color-text);
    background-color: var(--color-background);

    color-scheme: light dark;
	padding: 0;
	margin: 0;

    font-family: "proxima-nova", sans-serif;
}



.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

h1, h2, h3, p {
	margin: 0;
	padding: 0;
}

a {
    text-decoration: none;
    color: var(--color-text);
}

svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

button {
	appearance: none;
	font: inherit;
}
	button :active {
		translate: 0 1px;
	}


ul {
    list-style-type: none;
    padding: 0em;
    margin: 0em;
}



/*********************/    /*********************/
/******               HEADER               ******/
/*********************/   /*********************/
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
picture {
	img {
		height: 2rem;
		object-fit: cover;
	}
}
header nav {
	display: flex;
	padding: var(--padding-medium);
	border-bottom: 1px solid var(--color-stroke);

	ul{
		display: grid;
		grid-template-columns: repeat(6, auto);
		grid-row: 1;
		gap: 1rem;

		position:fixed;
		left:0;
		right:0;
		top: 4.2rem;
		bottom:0;
		
		translate:100% 0%;

		@media (width > 50em) {
			position:static;
			translate: 0 0;	

			svg {
				display: none;
			}


			li:nth-of-type(1) {
				grid-column-start: 6;
				grid-row: inherit;
			}
			li:nth-of-type(2) {
				grid-column-start: 5;
				grid-row: inherit;
			}
			/* li:nth-of-type(6) {
				display: none;
			} */

		}	

		/* verkoop tickets */
		li:first-child a {
			background-color: var(--color-extra);
			border-radius: .5rem;
			padding: var(--padding-small);
			color: var(--color-text_reverse);
			justify-content: center;
		}	

		li a {
			font-size: var(--fontsize-s);
			color: var(--color-secondary-text);	
		}
	  }


	  /* hamburgermenu */
	button {
		z-index:100;

		appearance: none;
		width: 2.5em;
		aspect-ratio: 1/1;
	
		border: none;
		padding: 0;
		background-color: var(--color-background);
		
		display: grid;
		justify-items: center;
		align-items: center;
		position:relative;

		@media (width > 50em) {
			display:none;
		}	
	}
}

/* als menu open is */
nav.toonMenu ul {
	translate:0% 0%;
	background-color: var(--color-background);

	display: flex;
	flex-direction: column;
	gap: .5rem;

	font-style: normal;

	li a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--padding-medium);
	}

	/* verkoop tickets */
	li:first-child a {
		background-color: var(--color-extra);
		border-radius: .5rem;
		padding: var(--padding-small);
		color: var(--color-text_reverse);
		justify-content: center;
	}
}



/* kruisje */
button span {
    display: block;
    width: 1.5em;
    height: .1em;
    background-color: var(--color-background_reverse);
	
    grid-row-start: 1;
    grid-column-start: 1;
    transition: .25s;


}
	button span:nth-of-type(1) {
		translate: 0 -.4em;
	}
	button span:nth-of-type(3) {
		translate: 0 .4em;
	}
	button.kruisje span:nth-of-type(1) {
		translate: 0 0;
		rotate: 45deg;
	}
	button.kruisje span:nth-of-type(2) {
		scale: 0 1;
	}
	button.kruisje span:nth-of-type(3) {
		translate: 0 0;
		rotate: -45deg;
	}


  
  
  







 













/*********************/    /*********************/
/******               FOOTER               ******/
/*********************/   /*********************/

footer {
	h2 {
		font-weight: 400;
		font-size: var(--fontsize-m);
	}

	a, p{
		font-size: var(--fontsize-s);
		color: var(--color-secondary-text);
	}

	section:nth-child(4) button {
		color: var(--color-extra);
		padding: var(--padding-medium);
		border-radius: .5rem;
		width: 100%;
	
		background-color: var(--color-extra-background);
		border: none;
		font-weight: 600; 
	}
}


/* partners */
.full-width section {
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(2, 1fr);
	padding: var(--padding-medium) 0;	


	h2 { grid-area: 1 / 1 / 2 / 2; }

	a { 
		grid-area: 2 / 1 / 3 / 2; 
		color: var(--color-extra);
	}

	ul { 
		grid-area: 1 / 2 / 3 / 3; 
		grid-row: span 2;
		align-items: center;

		display: flex;
		gap: 1em;
		flex-basis: 100%;
		justify-content: space-between;
		overflow-x: scroll;
		scrollbar-width: none;

		img {
			height: 40px;
		}
	}
}


footer > div:nth-of-type(2) {
	display: grid;
	gap: 2rem;
	padding: var(--padding-extralarge) 0;

	@media (width > 48em) {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 0;
		

		section:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
		section:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
		section:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
		section:nth-child(4) { 
			grid-area: 1 / 3 / 3 / 4; 
			grid-row: span 2;	
		}
	}	




	/* nav linkjes */
	section:nth-child(2) a:hover {
		color: var(--color-text);
		transition: color 500ms;
	}



   /* store en awards */
	section:nth-child(4) ul {
		li {
			display: flex;
			gap: 1rem;
		}

		span {
			display: block;
		}

		svg {
			color: var(--color-ster);
			fill: var(--color-ster);

			width: 16px;
			height: 16px;
		}
	}	

	/* appstore / playstore */	
	section:nth-child(4) {
		ul:nth-of-type(1) {
			img {
				height: 4rem;
				aspect-ratio: 16/9;
				object-fit: contain;
			}
		}
	}
	/* websitevanhetjaar  */
	section:nth-child(4) {	
		ul:nth-of-type(2) {
			display: flex;
			gap: 1rem;

			img {
				width: 4rem;
				object-fit: cover;
			}
		}
	}
}


















	
	



/*   section full widh en kleiner */
main {
	display:grid;
	grid-template-columns:1fr min(100% - 2rem, 60rem) 1fr;
  }
  
  
main > section  {
	grid-column:2/3;
  }
  
  section.full-width {
	grid-column:1/-1;
	border-top: 1px solid var(--color-stroke);
	border-bottom: 1px solid var(--color-stroke);
	
	div {
	  width:min(100% - 2rem, 60rem);
	  margin-inline:auto;
	}
}



footer {	
	display:grid;
	grid-template-columns:1fr min(100% - 2rem, 60rem) 1fr;
}
footer >  div {
	grid-column:2/3;
  }
  
.full-width {
	grid-column:1/-1;
	border-top: 1px solid var(--color-stroke);
	border-bottom: 1px solid var(--color-stroke);
}
.full-width > section {
	width:min(100% - 2rem, 60rem);
	margin-inline:auto;
}