/* import font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
	/* Main Colors */
	--c-magenta: rgb(185, 0, 95);
	--c-pink: rgb(227, 0, 89);

	/* Text */
	--c-white: rgb(255, 255, 255);
	--c-white2: white;
	--c-grey: rgb(149, 149, 149);
	--c-text-header: black;

	/* body */
	--c-background: rgb(30, 30, 30);

	/* Containers */
	--c-container: rgb(44, 44, 44);
	--c-container-stroke: rgb(69, 69, 69);

	/* Contrast Colors */
	--c-green: rgb(82, 255, 0);
	--c-orange: rgb(255, 153, 0);
	--c-red: rgb(247, 44, 44);

	/* input */
	--c-border: rgb(255, 255, 255);

	/* modal button */
	--c-modal-button: rgb(99, 99, 99);
	--c-text-button: #ffffff;

	/* HSL main */
	--purple-h: 329;
	--purple-s: 100;
	--purple-l: 36;

	--pink-h: 336;
	--pink-s: 100;
	--pink-l: 45;

	/* HSL contrast */
	--yellow-h: 42;
	--yellow-s: 100;
	--yellow-l: 69;

	--cyan-h: 187;
	--cyan-s: 57;
	--cyan-l: 54;

	--green-h: 168;
	--green-s: 65;
	--green-l: 41;

	--blue-h: 230;
	--blue-s: 35;
	--blue-l: 54;

	/* HSL support */
	--dark-h: 338;
	--dark-s: 18;
	--dark-l: 35;

	--light-h: 8;
	--light-s: 18;
	--light-l: 74;

	/* HSL alpha */
	--light: 0.8;
	--neutral: 0.6;
	--dark: 0.4;

	/* HSL combinations */
	--purple-light: hsl(var(--purple-h) var(--purple-s) var(--purple-l) / var(--light));
	--purple-neutral: hsl(var(--purple-h) var(--purple-s) var(--purple-l) / var(--neutral));
	--purple-dark: hsl(var(--purple-h) var(--purple-s) var(--purple-l) / var(--dark));

	--pink-light: hsl(var(--pink-h) var(--pink-s) var(--pink-l) / var(--light));
	--pink-neutral: hsl(var(--pink-h) var(--pink-s) var(--pink-l) / var(--neutral));
	--pink-dark: hsl(var(--pink-h) var(--pink-s) var(--pink-l) / var(--dark));

	--yellow-light: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / var(--light));
	--yellow-neutral: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / var(--neutral));
	--yellow-dark: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / var(--dark));

	--cyan-light: hsl(var(--cyan-h) var(--cyan-s) var(--cyan-l) / var(--light));
	--cyan-neutral: hsl(var(--cyan-h) var(--cyan-s) var(--cyan-l) / var(--neutral));
	--cyan-dark: hsl(var(--cyan-h) var(--cyan-s) var(--cyan-l) / var(--dark));

	--green-light: hsl(var(--green-h) var(--green-s) var(--green-l) / var(--light));
	--green-neutral: hsl(var(--green-h) var(--green-s) var(--green-l) / var(--neutral));
	--green-dark: hsl(var(--green-h) var(--green-s) var(--green-l) / var(--dark));

	--blue-light: hsl(var(--blue-h) var(--blue-s) var(--blue-l) / var(--light));
	--blue-neutral: hsl(var(--blue-h) var(--blue-s) var(--blue-l) / var(--neutral));
	--blue-dark: hsl(var(--blue-h) var(--blue-s) var(--blue-l) / var(--dark));

	--dark-light: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / var(--light));
	--dark-neutral: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / var(--neutral));
	--dark-dark: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / var(--dark));

	--light-light: hsl(var(--light-h) var(--light-s) var(--light-l) / var(--light));
	--light-neutral: hsl(var(--light-h) var(--light-s) var(--light-l) / var(--neutral));
	--light-dark: hsl(var(--light-h) var(--light-s) var(--light-l) / var(--dark));
}

@media (prefers-color-scheme: dark) {
	:root {
		/* HSL support */
		--dark-h: 8;
		--dark-s: 18;
		--dark-l: 74;

		--light-h: 338;
		--light-s: 18;
		--light-l: 35;
	}
}

.lightmode {
	--c-background: white;
	--c-container: rgb(185, 0, 95);
	--c-pink: rgb(99, 99, 99);
	--c-container-stroke: white;
	--c-grey: white;
	--c-white2: black;
}

* {
	padding: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	box-sizing: border-box;
}

body {
	background-color: var(--c-background);
	color: var(--c-white);
}

/* Text styles */

h1 {
	font-size: 3rem;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
}

h2 {
	font-size: 2rem;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
}

h3 {
	font-size: 2rem;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
}

p {
	font-size: 1rem;
	font-weight: 400;
	font-family: 'Inter', sans-serif;
	line-height: 141.667%;
	letter-spacing: 0.0025rem;
}

/* Default layout */

.richtlijn-uitleg > ul {
	margin-left: 1.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.richtlijn-uitleg > ul li {
	padding: 0.3em 0;
	font-size: 0.9rem;
	line-height: 141.667%;
	letter-spacing: 0.0025rem;
}

.disabled {
	display: none;
}