@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Thin.ttf);
  font-weight: 200;
}

@font-face {
  font-family: inter;
  src: url(../fonts/Inter_18pt-Medium.ttf);
  font-weight: 550;
}

/* CUSTOM PROPERTIES */

:root {
	--color-text:#111;
	--color-headings: #111;
	--color-background:#eee;

	--color-headerback: rgb(249, 249, 249);
	--color-white: white;

	--blue: #0f14ff;
	--yellow: #ffff00; 
}


*, *::after, *::before {
  box-sizing:border-box;  
margin: 0;
padding: 0;

max-width: 100%;
}

::selection {
	background-color: var(--blue);
	color: var(--yellow);
}

/* BODY ETC. */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body, html {
	position: relative;
	overflow-x: hidden;
	max-width: 100%;
	margin: 0;
	padding: 0;

	font-family: inter;
	font-size: 18px;
}

p {
	font-weight: 400;
	color: var(--color-text);
}

h1 {
	color: var(--color-headings);
	font-size: 1.5em;
	font-weight: 700;
}

h2 {
	color: var(--color-headings);
	font-size: 3em;
	font-weight: 700;
	line-height: 1em;
}

strong {
	font-weight: 700;
}

em {
	font-weight: 550;
}

a {
	text-decoration: none;
	color: var(--color-text);
}

a:hover {
	color: var(--blue);
}

/* MAIN AND HEADER */

main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));

	padding: 1rem;
	padding-top: 3rem;

	gap: 2em;

	background: url(../images/achtergrond.png);

}

header {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-headerback);

	height: 7rem;
}

nav ul {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 1em;

	list-style: none;
	padding: 0;
}

main a {
	background-color: var(--blue);
	color: var(--color-white);
	padding: 1em;
	border-radius: 2em 0 2em 0 ;
	width: max-content;

	align-self: flex-end;
}

main a:hover {
	background-color: var(--yellow);
	color: var(--color-text);
	
}

p:has(.helpText) {
	font-size: small;
	color: var(--blue);
	text-align: end;
}