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


@font-face {
	font-family: 'twix';
	src: url('../font/GoforGoldDisplayCompressed.woff') format('woff');
	src: url('../font/GoforGoldDisplayCondensed.woff') format('woff2');
	src: url('../font/GoForGoldText.woff') format('woff3');
	font-weight: normal;
	font-style: normal;
}

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

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

	--color-text-dark:#490F00;
	--color-text-light: #ffff;
	--background-header-dark: #E69D31;
	--background-header-light: #EFC16D;
	--background-main: #490f00;
	--background-section: #FFF0EB;
	--button-color: #E62B1E;
}

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

/* FONTS */
h1, h2, h3, h4, p, a {
	font-family: 'twix', Arial, Helvetica, sans-serif;
}


/*HEADER*/
header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(
			to right,
			var(--background-header-dark),
			var(--background-header-light),
			var(--background-header-dark)
			);
	height: 5em;
}

header img{
	height: 5.5em;
	width: 5.5em;
	margin: 1em;
}


header nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

header nav ul li a{
	color: var(--color-text-dark);
	text-decoration: none;
	list-style: none;
}

/* NAV */

nav {
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
}

nav ul{
	display: block;
	position: fixed;
	top: 5em;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(
			to right,
			var(--background-header-dark),
			var(--background-header-light),
			var(--background-header-dark)
			);
	translate: -100%;
	transition: 1s
}

nav ul li{
	padding: 1em;
}

nav ul li a{
	font-size: 2em;
}

nav.is-open ul {
  translate: 0%;
  transition: 1s;
}

/* nav button bron: Sanne in de les */
nav button {
	z-index: 1;
	position: relative;
	top: .15em;
	right: 1em;
	appearance: none;
  	font-size: 1em;
  	width: 3em;
  	aspect-ratio: 1;
  	border: none;
  	background: none;
	display: grid;
	justify-content: end;
	align-content: center;
}



nav button span{
  display: block;
  width: 1.5em;
  height: .2em;
  background-color: var(--button-color);
  border-radius: .1em;
  grid-column-start: 1;
  grid-row-start: 1;
}

nav button span:nth-of-type(1){
  translate: 0 -.5em;
}

nav button span:nth-of-type(3){
  translate: 0 .5em;
}

nav button.is-open span:nth-of-type(1){
  translate: 0 0;
  rotate: 45deg;
}

nav button.is-open span:nth-of-type(2){
  scale: 0 1;
}

nav button.is-open span:nth-of-type(3){
  translate: 0 0;
  rotate: -45deg;
}



/* FOOTER */

footer img {
	width: 5em;
	height: 5em;
}

footer section:nth-of-type(1) {
	background: linear-gradient(
			to right,
			var(--background-header-dark),
			var(--background-header-light),
			var(--background-header-dark)
			);
	
}

footer section:nth-of-type(2) {
	background-color: var(--button-color);
}

footer section:nth-of-type(3) {
	background-color: var(--button-color);
}