body {
	/* Standaard kleuren voor licht thema */
	background-color: #fff;
	color: #000;
}

.bp {
	font-size: 18px;
	font-weight: 600;
	font-style: italic;
	color: #b266ff;
	padding-bottom: 30px;
	padding-top: 30px;
	padding-left: 40px;
	position: center;
	margin-top: 30px;
}

.text {
	color: #cc99ff;
	padding-right: 40px;
	padding-bottom: 15px;
	padding-top: 30px;
}

.text2 {
	color: #cc99ff;
	padding-right: 40px;
	padding-bottom: 15px;
	padding-top: 27px;
}

.text_klein {
	font-size: 12px;
}

a {
	color: #cc99ff;
}

.submitKnop {
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	color: #a0a0a0;
	background-color: #fff;
	/* Achtergrondkleur van de knop */
	padding: 10px 20px;
	/* Voegt wat ruimte binnen de knop toe */
	cursor: pointer;
	/* Verandert de cursor naar een handje wanneer je over de knop beweegt */
	border: 1px outset #121212;
	/* Voegt een solide rode rand van 2px toe */
}

.nav-link.active {
	float: right;
	padding-right: 20px;
}

/* Stijl voor de knop bij hover */
.submitKnop:hover {
	background-color: #e0e0e0;
	color: #a0a0a0;
	/* Lichtgrijze achtergrond bij hover */
}

.submitKnopRek {
	background-color: #e0e0e0;
	margin-top: 25px;
	margin-bottom: 15px;
	color: #808080;
	border: 1px outset #121212;
}

.submitKnopRek:hover {
	background-color: #6666ff;
	color: #fff;
}

/* Stijlen voor donker thema */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	.bp {
		color: #ff8c00;
		/* Een oranje-achtige voor de .bp klasse in donker thema */
	}

	.text,
	.text_klein {
		color: #add8e6;
		/* Lichtblauw voor tekst in donker thema */
		/*  Geen wijziging voor ".text2"  in donker thema */
	}

	/* Stijl voor de knop bij hover in donker thema */
	.submitKnop:hover {
		background-color: #ffffcc;
		color: #000;
		/* Lichtgrijze achtergrond bij hover */
	}

	a {
		color: lightseagreen;
	}
}