/*

Deze CSS hoef je niet aan te passen; dit zijn algemene stijlen voor elke pagina.
Gebruik het <style> element in het bestand van het component, waar ook wat hints staan.

*/



body {
	/* Je kunt de volgende FDND kleuren gebruiken in je code */
	--purple: #A675F5;
	--blue: #050542;
	--blue-50: rgba(5, 5, 66, 0.5);
	--green: #66E5BF;
	--yellow: #FFFC86;

	font-family: 'Open Sans', sans-serif;
	line-height: 1.6;
}

h1 {
	margin: 0;
	letter-spacing: -0.05em;
}

.fdnd-nav a {
	color: var(--blue);
}
.fdnd-nav a:hover, .fdnd-nav a:focus-visible {
	text-decoration: none;
}

/* En als je een simpele button wilt, kun je deze class gebruiken */
.fdnd-button {
	padding: .3em .6em;
	border: 1px solid transparent;
	border-radius: .5rem;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	color: var(--green);
	background: var(--blue);
	cursor: pointer;
}

video {
	max-width: 100%;
	height: auto;
}

/* Alle focus states zijn al voor je gedaan, dus maak je daar niet druk om */
:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}