@charset "UTF-8";
/* CSS Document */



:root {
	/* Kleuren uit de visual */
	--color-beige: #fde5d1;
	--color-purple: #ac72ae;
	--color-turquoise: #00a9b7;
	--color-grey: #bdb4af;
	--color-green: #94c356;
	--color-orange: #ee7203;
	--color-yellow: #e7cb48;

	/* Neutrale kleuren */
	--color-black: #000000;
	--color-white: #ffffff;

	/*
	 * Tekstkleur per achtergrond.
	 * Deze verdeling volgt de kleurtoepassing uit de aangeleverde visual.
	 */
	--text-on-beige: var(--color-black);
	--text-on-purple: var(--color-white);
	--text-on-turquoise: var(--color-white);
	--text-on-grey: var(--color-black);
	--text-on-green: var(--color-black);
	--text-on-orange: var(--color-white);
	--text-on-yellow: var(--color-black);

	/* Veilige standaardwaarden voordat JavaScript is geladen */
	--page-background: var(--color-beige);
	--page-text: var(--text-on-beige);
}

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

html {
	min-height: 100%;
}

body {
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	background-color: #fff;
	color: #000;
	font-family: "arial", sans-serif;
	font-size: 18px; line-height: 24px
}

p {margin: 0; padding: 0 0 0 0}

a {color: #000; font-weight: bold;}

h1{
font-weight: 700;
font-style: normal;}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.page {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding:
		max(1.5rem, env(safe-area-inset-top))
		max(1.5rem, env(safe-area-inset-right))
		max(1.5rem, env(safe-area-inset-bottom))
		max(1.5rem, env(safe-area-inset-left));
}

.intro {
	width: min(100%, 50rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	text-align: center;
}

.intro__image {
	width: min(70vw, 20rem);
	max-height: 55vh;
	object-fit: contain;
}

.intro__text {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
	

}