@font-face {
	font-family: "fontsans";
	src: url("../font/AllTogetherSans-Regular.woff2");
	font-weight: 400;
  }

  @font-face {
	font-family: "header";
	src: url("../font/AllTogetherSerif-WideBlk.woff2");
	font-weight: 400;
  }

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

body{
	margin: 0;
	padding: 0;
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	/* startje */
	--color-text:#111;
	--color-background:#d4ebff;
	--color-darkgrey:#6d6e70;
	--color-lightgrey:#dbdee3;
	--color-white:#FFFFFF;
	--color-brown:#5b1f06;
	--color-yellow:#ffd200;
	--color-lightlightgrey:#f3f6fb;
	--color-blue:#0e74e2;
	--color-pink:#ffadbf;
	--color-red:#d70100;
	--color-green:#73cf11;
	--color-lilac:#d7a1ff;
	--color-lime:#dce84f;
}
ul{
	list-style: none;
}

/****************/
/* JOUW STYLING */
/****************/
header {
	width: 100%;
	background-color:var(--color-white);
  }

  header button:nth-of-type(1) {
	background-color: transparent;
	border: none;
	z-index: 1000;
	position: fixed;
  }


  /* HIER KLOTEN MET GRID  */
  /* fr gebruik je bij grid, colums horizontaal, row verticaal */
 /* HIER KLOTEN MET GRID  */
  /* fr gebruik je bij grid, colums horizontaal, row verticaal */
  header{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	/* grid-template-areas:
	"navigatie logo icons"
	"ontwerp witruimte mix"; */

	}
  header nav {
 grid-column:span 1
  }
 header > img{
	 justify-self:center;
	 align-self:center;
	 grid-column:span 4;
	 background-color:coral
		 

	/* grid-area:logo; */
 }


 header > section ul:nth-of-type(1) {
 background-color: pink;
	 display:flex;
	 grid-column:span 1;
	 /* als ie kut doet haal ul nth of type weg */
 }

header > nav{
	grid-column:1;
}

header>ul:nth-of-type(1){
	display:flex;
	grid-column:span 3;
}
header>ul:nth-of-type(2){
	display:flex;
	grid-column:span 3;
}
/*DIT ZIJN DE LAATSTE TWEE IMAGES EN LINKJES IN DE HEADER */
 header > ul:nth-of-type(1) li:nth-of-type(1) img {
	 /*voor grootte image specifiek  */
	 grid-column: span 2;
	 background-color:green
	/* background-color: #0e74e2; */
 }
header > ul:nth-of-type(1) li:nth-of-type(2){
	background-color:green
}
header > ul:nth-of-type(2) li:nth-of-type(1) img{
	/*voor grootte image specifiek  */
	grid-column: span 2;
	background-color:black
}

 header > ul:nth-of-type(2) li:nth-of-type(2){
background-color:black
	/* background-color: green; */
 }

 header > ul:nth-of-type(2) li:nth-of-type(2){
grid-column:span 5;
	 
	/* background-color: green; */
 }
 
  /* ONZICHTBAAR MENU IN DE NAV */
  header nav section:first-of-type {
	position:absolute;
	inset:0;
	padding-top:2em;
	width: 80%;
	transition: transform 0.3s ease;
	translate:-100% 0;
	transition:.5s;
	background-color:var(--color-white);
	z-index: 300;
  }

  header nav section:nth-of-type(1) img{
	width: 2.625em;
  }

  header nav section:nth-of-type(1) ul li:nth-of-type(1) img{
	width: 2em;
  }

  /* open is javascript */
  header nav  section:nth-of-type(1).open {
	translate:0 0;
	z-index: 10000;
	padding: 0;

  }
  
  header nav section:nth-of-type(2) {
	order: 1;
}

header > ul img {
	width: 2em;
}

header ul:nth-of-type(3){
	display: flex;
	justify-content: space-between;
	padding: 1em;
	border-radius: 5%;
}

  header ul:nth-of-type(3) li {
	background-color: var(--color-lightlightgrey);
	border-radius: 5px;
	padding: 10px;
	margin: 5px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	padding: 1em;
	margin: 2em;
  }
  
  header ul:nth-of-type(3) li a {
	color: white;
	text-decoration: none;
	color: var(--color-brown);
  }
  
  header ul:nth-of-type(3) li img {
	display: inline-block;
	margin-bottom: 1em;
  }



  header nav section ul:nth-of-type(4) li {
	padding: 10px;
	display: inline-block; 
  }
  
  header nav section ul:nth-of-type(4) li a {
	text-decoration: none;
	color: var(--color-brown);
	padding: 10px;
	display: block;
  }
  
  header nav section ul:nth-of-type(4) li img {
	margin-right: 8px;
  }


  header ul:nth-of-type(5){
	display: flex;
	justify-content: space-between;
	padding: 1em;
	border-radius: 5%;
}
header ul:nth-of-type(5) li:nth-of-type(3) img{
	border-radius: 50%;
}


/* FOOTER */
footer{
background-color: var(--color-lightlightgrey);
overflow: hidden;
}

footer> img:nth-of-type(1){
	width: 97%;
	background-color: var(--color-yellow);
	padding: 3em;
}

footer ul:nth-of-type(1){
display: inline grid;
grid-template-columns: 1fr 1fr;
grid-template-rows:1fr 1fr ;
gap: 1em;
}

footer ul:nth-of-type(1) li{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

footer ul:nth-of-type(1) li:nth-of-type(1) {
    grid-column: 1; /* Top-left */
    grid-row: 1;
}

footer ul:nth-of-type(1) li:nth-of-type(2) {
    grid-column: 1; /* Bottom-left */
    grid-row: 2;
}

footer ul:nth-of-type(1) li:nth-of-type(1) p {
    grid-column: 2; /* Top-right text */
    grid-row: 1;
}

footer ul:nth-of-type(1) li:nth-of-type(2) p {
    grid-column: 2; /* Bottom-right text */
    grid-row: 2;
}

/* Styling images */
footer ul img {
    width: 100px;
    height: auto;
}

/* over ons linkjes etc etc tot over ons */
/* HOE KRIJG IK DEZE UITKLAPBAAR ZOALS EHT ORIGINEEL */
footer ul:nth-of-type(2){
background-color: var(--color-background);
}
footer ul:nth-of-type(2) a{
text-decoration: none;
color: var(--color-brown);
}

/* socials */
footer ul:nth-of-type(3) img{
    background-color:purple;
    display:flex;
}

footer ul:nth-of-type(2){
background-color: var(--color-background);

}

footer ul:nth-of-type(3) img{
    background-color:blue;
    height:2em
}
footer ul:nth-of-type(3) p {
    display:flex;
    background-color: #73cf11;
    justify-content: left;
}

footer ul:nth-of-type(3) li{
    background-color:red;
    display: flex;
    align-items: end;
}

footer ul:nth-of-type(4){
    background-color:brown;
}

/* alles op  */
/* footer ul:nth-of-type(2) li{
	display: grid;

}

footer ul:nth-of-type(2) li:nth-of-type(1) p {
	grid-column: 1;
	grid-row: 1;
	text-align: left;
}

footer ul:nth-of-type(2) li:nth-of-type(1) img{
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

footer ul:nth-of-type(2) li:nth-of-type(2) p {
	grid-column: 1;
	grid-row: 2;
	text-align: left;
}

footer ul:nth-of-type(2) li:nth-of-type(2) img{
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
}  */