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

  :root {
	/* startje */
	--color-text:#111;
	--color-text-2:#fff;
	--color-background:#fff;
	--color-background-2:#111;
	--color-buttonbackground:#fff;
	--color-animation:#111;
	--background-color-buttontickets: #d6fe51;
	--background-color-buttontickets-hover: #9eba43;
	--color-p-grey:rgb(167, 169, 172);
	--color-event-p:rgb(128, 128, 128);
	--color-grey-background:#ddd;
	--font-Melkweg: 'Melkweg', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--font-Calibre: 'Calibre', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	line-height: 1;

	/* --letter-width:2.29em;
	--streepje-width:calc( var(--letter-width) / 6 );
   */
}


/* fonts */
 
@font-face {
	font-family: 'Calibre';
	src: url(../fonts/calibre-regular.woff2);
}

@font-face {
	font-family: 'Calibre Medium';
	src: url(../fonts/calibre-medium.woff2);
}

@font-face {
	font-family: 'Melkweg';
	src: url(../fonts/melkweg-regular.woff2);
}

/* elementen onzichtbaar maken */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
  } 
   /* bron: https://www.a11yproject.com/posts/how-to-hide-content/ */

/* :focus{
	outline: solid red;

}
    */
body{
	max-width: 100vw;
	background-color: var(--color-background);
  }

  * {
	font-family: var(--font-Calibre);
	margin: 0;
	padding: 0;
	/* overflow-x: hidden; */
	font-weight: 400;
	

}  
h2, h3, h4, li p, article p {
	text-transform: uppercase;
}

header nav:first-of-type{
	display: flex;
	align-content: center;
	background-color: var(--color-background-2);
	width: 100%;
	padding: .5em;
	position: fixed;
	gap: .4em;

    right: 0;
    bottom: 0;
    left: 0;

	z-index: 75;
	font-size: 1.875rem;
}

header nav:first-of-type h2{
	font-family: var(--font-Melkweg);
	color: var(--color-text-2);
	font-size: .9em;
	font-weight: 300;

}
header nav:first-of-type a:first-of-type{
	margin-right: auto;
	display: flex;
	text-decoration: none;
}
a{
	cursor: pointer;
}

header nav:first-of-type svg:first-of-type{
	width: 1em;
    height: 1em;
    fill: none;

	stroke: var(--color-buttonbackground);
	stroke-width: 0.08em;
	stroke-linecap: round;
	stroke-linejoin: round;
}
header nav:first-of-type > div{
	width: .7em;
	height: .7em;
	background-color: var(--color-background-2);

	display: flex;
	flex-direction: column;
	justify-content: space-between;

}

header nav:first-of-type > div span{
	width: .7em;
	height: .08em;
	background-color: var(--color-background);
}

header nav:first-of-type a:nth-of-type(2),
header nav:first-of-type a:nth-of-type(3){
	display: none;

}
/* header nav:first-of-type svg:nth-of-type(2){
	width: 1em;
    height: 1em;
    fill: var(--color-background);
	stroke: var(--color-background);

	stroke-width: 0.1em;
	stroke-linecap: round;
	stroke-linejoin: round;


} */