/**************/
/* CSS REMEDY */
/**************/

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

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
	/* startje */
	--color-text: #ffffff;
	--color-background: #334D3A;
	--color-background-2: #ffffff;
	--color-footer-p: #334D3A;
	--color-footer-h: #334c3a;
	--color-note: #94A494;
	--color-note-text: #555f55;
	--base-padding: 1.5em 1.5em 3em 1.5em;
	--bottom-padding: .6em;
}

* {
	margin: 0;
	padding: 0;
}

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

@font-face {
	font-family: 'open-sans';
	src: url('/fonts/open-sans-v13-latin-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;

}

/* LOPENDE TEKST */
/* https://medium.com/@attarfarnoosh/an-animated-moving-text-effect-with-toy-story-characters-a8692e887042 */
div {
	font-family: 'Didot', sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	padding: 0.5em 1em 4.5em 1em;
	position: relative;
	overflow: hidden;
	width: 100%;
}

div h1 {
	position: absolute;
	text-wrap: nowrap;
	animation-name: move-titel;
	animation-duration: 35s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes move-titel {
	0% {
		left: 100%;
	}

	100% {
		left: -560%;
	}
}

@media (prefers-reduced-motion) {
	div {
		font-family: 'Didot', sans-serif;
		text-transform: uppercase;
		font-size: 2em;
		padding: 0.5em 1em 4.5em 1em;
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	div h1 {
		position: absolute;
		text-wrap: nowrap;
		animation-name: move-titel;
		animation-duration: 70s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	@keyframes move-titel {
		0% {
			left: 100%;
		}

		100% {
			left: -560%;
		}
	}
}

/* ALGEMENE STYLING */
body h2 {
	font-family: 'Didot', sans-serif;
}

body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: 'open-sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

body p {
	line-height: 1.6em;
}

body img {
	width: 100%;
	height: auto;
}

main a {
	background-color: var(--color-note);
	color: #252925;
	text-decoration: none;
	padding: .6em 2em .6em 2em;
	font-weight: 600;
	font-size: .9em;
}

main a:hover {
	background-color: rgb(109, 140, 109);
}

/* EERSTE KOP EN ALINEA */
section:nth-of-type(1) {
	padding: .8em;
	color: var(--color-background);
}

section:nth-of-type(1) h2 {
	background-color: var(--color-background-2);
	padding: 2em 1em .6em 1em;
}

section:nth-of-type(1) p {
	background-color: var(--color-background-2);
	padding: 0em 1em 5em 1.5em;
}

/* TWEEDE KOP, ALINEA EN IMG */
section:nth-of-type(2) {
	padding: var(--base-padding);
}

section:nth-of-type(2) h2 {
	padding-bottom: var(--bottom-padding);
	font-size: 1.2em;
}

section:nth-of-type(2) p {
	padding-bottom: 2em;
}

section:nth-of-type(2) img {
	padding-top: 5em;
}

/* DERDE KOP, ALINE EN IMG */
section:nth-of-type(3) {
	padding: var(--base-padding);
}

section:nth-of-type(3) h2 {
	padding-bottom: var(--bottom-padding);
	font-size: 1.2em;
}

section:nth-of-type(3) p {
	padding-bottom: 2em;
}

section:nth-of-type(3) img {
	padding-top: 6em;
}


/* LIJSTJE */
section:nth-of-type(4) {
	padding: 3em 1.5em 3em 1.5em;
}

section:nth-of-type(4) h2 {
	padding-bottom: var(--bottom-padding);
	font-size: 1.5em;
}

section:nth-of-type(4) ul {
	padding-bottom: 2em;
	list-style-type: none;
}

/* RESPONSIVE */
@media (min-width: 70em){
	section:nth-of-type(1) {
		display: flex;
		padding: 2em;
		color: var(--color-background);
	}
	
	section:nth-of-type(1) h2 {
		background-color: var(--color-background-2);
		padding: 2em 1em .6em 1em;
		font-size: 2em;
	}
	
	section:nth-of-type(1) p {
		background-color: var(--color-background-2);
		padding: 3em .9em 5em 1.5em;
	}

	section:nth-of-type(1) img {
		width: 50%;
		height: auto;
	}

	section:nth-of-type(2) {
		padding: 1.5em 7.5em 3em 7.5em;
	}

	section:nth-of-type(3) {
		padding: 1.5em 7.5em 3em 7.5em;
	}

	section:nth-of-type(4) {
		padding: 3em 7.5em 5em 7.5em;
	}
}