/**************/
/* Algemeen */
/**************/


/* custom properties */
:root {
	color-scheme: light dark;
	/* tekst kleuren */
	--color-text-black: black;
	--color-text-white: white;
	--color-p:light-dark(black, white);
	
	/* losse kleuren */
	--color-white: white;
	--color-black: black;

	/* button kleuren */
	--button-background: light-dark(black, white);
	--button-color: light-dark(white, black);
	--backgroud-color-button-white: white;
	--backgroud-color-button-black: black;

	/* achtergronds kleuren */
	--color-background-purple: #8004e1;
	--background-img-main:linear-gradient(180deg, #ff96d7 0%, #fdcbe5 20%, #fdcbe5 80%, #ff96d7 100%);
	--background-color-main2: #ffeaf5;
	--color-background-pink-purple: #FF4EB5;

	/* border kleur */
	--color-border: light-dark(black, white);
	/* --color-form-button-border:black; */
	--color-valid: green;
	--color-invalid:red;

	/* active kleur */
	--color-active: #FF4EB5;

	/* extra's*/
	--color-underline-hover: black;
	--caret-color:#FF4EB5;
	--outline-focus-color:#5b2784;
	--svg-black-white:black;
}

@media (prefers-color-scheme: dark){
	:root{
		color-scheme: light dark;
		--background-img-main:linear-gradient(180deg,#1e0a28 0%,#3b0f45 35%,#521660 75%,#1e0a28 100%);
		--color-active:#F69FDA;
		--color-background-pink-purple: #5b2784; 
		--background-color-main2:#d7b5fc;
		--color-underline-hover:#FF4EB5;
		--outline-focus-color:#ff4eb5;
		--caret-color:#5b2784;
		--svg-black-white:white;
	}
}

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


/* lettertypes */
@font-face {
	font-family: "archia-bold";
	src: url(../fonts/archia-bold.otf);
}

@font-face {
	font-family: "archia-regular";
	src: url(../fonts/archia-regular.otf);
}

@font-face {
	font-family: "chaney-wide";
	src: url(../fonts/chaney-wide.otf);
}

@font-face {
	font-family: "parking-regular";
	src: url(../fonts/parking-regular.otf);
}


body {
	overflow-x: hidden;
}
*{
	padding: 0%;
	margin: 0%;
}

a {
	font-family: "chaney-wide";
}
*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
}

html {
	scroll-behavior: smooth;
}













/**************/
/* Header*/
/**************/

header {
	background-color: var(--color-background-pink-purple);
	height: 5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 2;
}

header nav button {
	text-align: center;
}

header  img {
	width: 11em;
	height: 3em;
	z-index: 1;
}


header nav button {
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
header>a:last-of-type:hover{
	animation-name: grootklein;
	animation-duration:1s;
	animation-iteration-count:5;
}

/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
	header>a:last-of-type:hover{
		animation-name: grootklein;
		animation-duration:1s;
		animation-iteration-count:5;
	}
}
/* animatie header button die van groot naar klein gaat */
@keyframes grootklein {
	0% {
	  scale:1;
	}
	50% {
	  scale:1.3;
	}
	100% {
	  scale:1;
	}
  }
 
header span {
	display: block;
	text-align: center;
	font-family: "chaney-wide";
	color: var(--color-p);

}
/* https://www.w3schools.com/graphics/svg_stroking.asp */
/* svg stroke kende ik nog niet en fill werkte niet */
header nav button svg path{
	stroke: var(--svg-black-white);
}

header nav {
	order: 2;
}


button {
	background: none;
	border: none;
	z-index: 1;
	appearance: none;
}


header li a {
	font-family: "parking-regular";
	position: relative;
	text-decoration: none;
	outline: none;
	background-size: 0% .15em;
	transition: background-size .3s;
	background-position: right bottom;
	background-repeat: no-repeat;
}

/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
	header li a:hover{
		background-size: 100% .15em;
		background-position: left bottom;
		background-image:linear-gradient(var(--color-underline-hover)0%, var(--color-underline-hover)100%);
	}	
}

header li a:hover{
	background-size: 100% .15em;
	background-position: left bottom;
	background-image:linear-gradient(var(--color-underline-hover)0%, var(--color-underline-hover)100%);
}
header li a:active{
	color: var(--color-active);
}

header ul {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	translate: 100% 0;
	transition: 0.5s;
	gap: 1em;
	color: var(--color-text-black);
	padding: 30% 0 0 6%;
	background-color: var(--color-background-pink-purple);

}


/* animatie voor slide in bij menu */
@keyframes slideinleft {
	from {
		transform: translateX(19em);
	}

	to {
		transform: translateX(0);
	}
}

/* menu */
nav.menuOpen ul {
	translate: 0 0;
}

/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
	nav.menuOpen li {
		animation-name: slideinleft;
		animation-duration: 1s;
	
	}	
}

nav.menuOpen li {
	animation-name: slideinleft;
	animation-duration: 1s;

}

nav li {
	flex-basis: 0;
	flex-grow: 0;
}


li {
	list-style-type: none;
}

a {
	text-decoration: none;
}


header>a:last-of-type {
	background-color: var(--backgroud-color-button-white);
	color: var(--color-text-black);
	border-radius: 20em;
	padding: 0.6em;
	margin: 0% 0% 0% auto;
	font-size: small;
	text-align: center;
}

header>a:last-of-type:hover{
	background-color: var(--color-black);
	color: var(--color-white);
}
header>a:last-of-type:active{
	background:#FF4EB5;
	color: var(--color-white);
}
a:focus-visible{
	outline-offset: .2em;
	outline-color: var(--outline-focus-color);
    outline-width: 1em;
}


header nav a {
	color: var(--color-p);
	font-size: 250%;
}
















/**************/
/* Main */
/**************/

/* cookie button */
main section:nth-of-type(1)>button:last-of-type:hover{
    cursor: pointer;
}
main section:nth-of-type(1) svg {
    fill: var(--svg-black-white);
}
main section:nth-of-type(1)>button:last-of-type {
    bottom: 1rem;
    left: 0.5rem;
    z-index: 1;
    position: fixed;
	margin:1em;

    width: 4em;
    height: 4em;

    background-color: var(--color-background-pink-purple);
    border-radius: 12%;
    opacity: 0.8;
    display:grid;
    place-items:center;
}
main section:nth-of-type(1) {
	position: relative;
}

main section:nth-of-type(1)img {
	position: absolute;
	top: 7rem;
}

main blockquote {
	/* font-family: "archia-regular";
	text-align: center;
	font-weight: 300;
	width: 70%;
	grid-column:2/3;
    justify-self: center; */
	font-family: "archia-regular";
    text-align: center;
    font-weight: 300;
    /* width: 70%; */
    grid-column: 2 / 3;
    /* justify-self: center; */
    max-width: 20em;
    line-height: 2;
}

main section:nth-of-type(4) h3 {
	font-family: "archia-bold";
	justify-self: center;
}

main blockquote, main section:nth-of-type(4) h3 {
	color: var(--color-text-black);
}
@keyframes slideinleft2 {
	from {
        transform: translateX(0);
	}

	to {
		transform: translateX(19em);
	}
}

main section:nth-of-type(3) p a:hover{
	background-size: 100% .15em;
	background-position: left bottom;
}

/* h2 titel centreren */
main section:nth-of-type(5) h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}









/****************/
/* footer */
/****************/
footer {
	background-color: var(--color-background-pink-purple);
	display: grid;
	grid-template-columns: 8% 80% 12%;
	grid-template-rows: 
	4em
	max-content
	1em
	max-content
	max-content
	max-content
	max-content
	max-content
	5em;
}

footer picture {
grid-column:2/3;
grid-row:2/3 ;
}

footer picture img {
	width: 70%;
}

footer section:nth-of-type(1) {
	grid-row: 4/5;
}
footer section:nth-of-type(2) {
	grid-row: 5/6;
}
footer section:nth-of-type(4) {
	grid-row: 7/8;
}
footer section:nth-of-type(5) {
	grid-row: 8/9;
}


footer section:nth-of-type(1) h2{
	display: grid;
	grid-column:2/3;
grid-row:3/4 ;
}

/* logo verandert naar wi voo dark mode */
/* @media (prefers-color-scheme: dark) {
footer img {
	width: 70%;
grid-column:2/3;
grid-row:2/3 ;
content: url(/images/logowondrtransparentdark2.png);
} */


footer section:nth-of-type(1) p {
	font-family: "chaney-wide";
	color: var(--color-p);
	text-align: start;
	grid-column:2/3;
	grid-row:3/4 ;

}
footer section{
	grid-column:2/3;

}



/* toegankelijkheid */
/* zorgt ervoor dat de gebruiker de motion uit kan zetten */
@media (prefers-reduced-motion: no-preference) {
	footer a, main section:nth-of-type(3) p a{
		position: relative;
		text-decoration: none;
		outline: none;
		background-image:linear-gradient(var(--color-underline-hover)0%, var(--color-underline-hover)100%);
		background-size: 0% .15em;
		transition: background-size .3s;
		background-position: right bottom;
		background-repeat: no-repeat;
	
	}
}

footer a, main section:nth-of-type(3) p a{
	position: relative;
	text-decoration: none;
	outline: none;
	background-image:linear-gradient(var(--color-underline-hover)0%, var(--color-underline-hover)100%);
	background-size: 0% .15em;
	transition: background-size .3s;
	background-position: right bottom;
	background-repeat: no-repeat;

}

footer section:nth-of-type(3) a:hover {
	background-size: 100% .15em;
	background-position: left bottom;
}



footer section:nth-of-type(4) nav ul li a:hover {
	background-size: 100% .15em;
	background-position: left bottom;
}


footer a:active {
	color: var(--color-active);

}


footer section:nth-of-type(5) ul li a {
	list-style-type: none;
	line-height: 350%;
	
}

footer section:nth-of-type(2) ul {
	display: flex;
	gap: 4%;
}

footer h3,
footer h2 {
	font-family: "parking-regular";
	color: var(--color-p);
	font-size: xx-large;
	font-weight: lighter;
	line-height: 300%;
}

footer section:nth-of-type(2) nav {
	border-bottom: solid var(--color-border);
	border-width: 0.1em;
}

footer input {
	appearance: none;
	font: inherit;
	width: 60%;
	background-color: var(--color-white);
	border-radius: 1.375em 0 0 1.375em;
	padding: 0.6em 1em 0.6em 1em;
	border: solid;
	border-color: var(--color-text-black);
	font: inherit;
	appearance: none;
	border-width: medium;
	color: var(--color-text-black);
	font-family: "archia-regular";
}

/* toegankelijkheid */
/* placeholder kleur donkerder gemaakt voor meer contrast */
footer input::placeholder {
	font-family: "archia-regular";
	width: 100%;
	font-size: medium;
	color: var(--color-text-black);
}

footer form {
	display: flex;
}

footer h3:hover {
	cursor: pointer;
}

footer section:nth-of-type(1) button {
	border-radius: 0 2em 2em 0;
	padding: 1.1em 1em 1em 1em;
	border-width: medium;
	background-color: var(--backgroud-color-button-black);
	color: var(--color-white);
	position: relative;
	right: 2%;
	width: 40%;
}

footer section:nth-of-type(1) button:hover{
cursor: pointer;
}
footer section:nth-of-type(1) button:active{
	background-color: var(--backgroud-color-button-white);
    color: var(--color-text-black);
}
footer section:nth-of-type(1) button:focus-visible{
	outline-offset: .2em;
	outline-color: var(--outline-focus-color);
    outline-width: 1em;
	border-color: var(--color-black);
}

footer section:nth-of-type(1) form {
	padding: 5% 0 10%;
	font-size: larger;
}

footer a {
	font-family: "archia-regular";
	display: flex;
	color: var(--color-p);
	font-size: large;
	max-width: fit-content;
}

footer section:nth-of-type(5) p {
	font-family: "archia-regular";
	font-size: small;
}

footer section:nth-of-type(3) ul:nth-of-type(1) a:first-of-type {
	text-decoration: underline;
}


footer section:nth-of-type(2) a {
	background-color: var(--color-text-black);
	border-radius: 100%;
	min-width: 3em;
	height: 3em;
	/* display: inline-flex; */
	display: grid;
	grid-template-columns: 21% 79%;
	grid-template-rows: 1fr 1fr 1fr;
}
footer a:focus-visible{
	border-color: var(--color-text-white);
}

footer section:nth-of-type(2) ul {
	padding: 0 0 2em 0;
}

footer section:nth-of-type(5) {
    display: flex;
    flex-direction: column;
    gap: 2.5em
}
footer section:nth-of-type(5) a{
	font-size: small;
}

footer h4 {
	font-family: "archia-bold";
	color: var(--color-p);
	font-size: large;
}

footer section svg:nth-of-type(1) {
	grid-column: 2/3;
	grid-row: 2/3;

}
/* footer section:nth-of-type(3){
	display: grid;
} */

footer section:nth-of-type(3) {
	grid-row: 6/7;
}
footer section:nth-of-type(3) address{
	font-style: normal;

}

footer section:nth-of-type(3) address strong{
	font-family: "archia-bold";
    color: var(--color-p);
    font-size: large;
}

footer section:nth-of-type(3) ul li a:nth-of-type(1){
margin: 0 0 3em 0;
}