/* ============= */
/* Lettertype(s) */
/* ============= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ========================= */
/* Kleuren (light/dark mode) */
/* ========================= */
:root,
:root.light-mode {
	--primary-color: #16ae97;
	--white: #ffffff;
	--menu-color: #202124;
	--black-white: #000000;
	--black-white-reverse: #ffffff;
	--background1: #e7f6f4;
	--background2: #ffffff;
	--background3: #a1ded5;
	--peper-color: #d63637;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary-color: #16ae97;
		--white: #ffffff;
		--menu-color: #202124;
		--black-white: #ffffff;
		--black-white-reverse: #000000;
		--background1: #202124;
		--background2: #292b2e;
		--background3: #17171a;
		--peper-color: #d63637;
	}
}

:root.dark-mode {
	--primary-color: #16ae97;
	--white: #ffffff;
	--menu-color: #202124;
	--black-white: #ffffff;
	--black-white-reverse: #000000;
	--background1: #202124;
	--background2: #292b2e;
	--background3: #17171a;
	--peper-color: #d63637;
}

/* ============= */
/* Complete html */
/* ============= */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 3.2rem;
	color-scheme: normal;
}

/* =================== */
/* Body van de website */
/* =================== */
body {
	margin: 0;
}

body p {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--black-white);
	margin: 0;
}

body h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 2rem;
	color: var(--black-white);
	margin: 0;
}

body h3 {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--black-white);
	margin: 0;
}

.disablescroll {
	/* Class wordt toegevoegd d.m.v. JS en blokkeert het scrollen (trigger hamburger)*/
	overflow: hidden;
}

/* ============== */
/* Primary button */
/* ============== */
.primary-button {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	text-decoration: none;
	color: var(--white);
	background-color: var(--primary-color);
	padding: 0.75rem 1.5rem;
	border: solid 0.1rem var(--primary-color);
	border-radius: 0.25rem;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	width: fit-content;
	transition: all ease 0.5s;
}

.primary-button:hover,
.primary-button:focus {
	/* Primary button hover & focus */
	color: var(--black-white);
	background-color: transparent;
}

.primary-button:active {
	/* Primary button active */
	color: var(--primary-color);
	transition: all ease 0.1s;
}

/* ================ */
/* Secondary button */
/* ================ */
.secondary-button {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	text-decoration: none;
	color: var(--primary-color);
	background-color: transparent;
	padding: 0.75rem 1.5rem;
	border: solid 0.1rem var(--primary-color);
	border-radius: 0.25rem;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	width: fit-content;
	transition: all ease 0.5s;
}

.secondary-button:hover,
.secondary-button:focus {
	/* Primary button hover & focus */
	color: var(--black-white);
}

.secondary-button:active {
	/* Primary button active */
	color: var(--primary-color);
	background-color: transparent;
	transition: all ease 0.1s;
}

/* ==================== */
/* Naast elkaar buttons */
/* ==================== */
.buttons-inline {
	display: flex;
	gap: 1rem;
}

@media (max-width: 1024px) {
	.buttons-inline {
		display: flex;
		flex-direction: column;
	}
}

/* ================= */
/* Hoofdmenu styling */
/* ================= */
header {
	display: flex;
	align-items: center;
	padding: 1.5rem 5rem;
	background-color: var(--menu-color);
	position: sticky; /* Header tonen tijdens het scrollen i.c.m. top 0*/
	top: 0;
	z-index: 9; /* Header overlapt overige content */
}

header > a > svg {
	/* Logo */
	width: auto;
	height: 2.5rem;
}

/* Logo styling */
.logo-beeld {
	fill: var(--primary-color);
}

.logo-letters {
	fill: var(--white);
}

nav {
	width: 100%; /* Breedte menu */
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end; /* Complete list aan het einde */
}

nav ul a {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: var(--white);
	text-decoration: none;
	margin-left: 1rem;
	transition: all ease 0.1s;
}

nav ul a:hover,
nav ul a:focus {
	border-bottom: solid 0.1rem var(--primary-color);
}

nav ul a:active {
	color: var(--primary-color);
}

.hoofdmenu-button a {
	/* Button in de menu */
	background-color: var(--primary-color);
	padding: 0.75rem 1.5rem;
	border: solid 0.1rem var(--primary-color);
	border-radius: 0.25rem;
	display: flex;
	align-items: center; /* Tekst en Icoon vertical gecenterd van elkaar */
	transition: all ease 0.5s;
}

.hoofdmenu-button svg {
	margin-left: 0.25rem;
}

.hoofdmenu-button a:hover,
.hoofdmenu-button a:focus {
	background-color: transparent;
}

.hoofdmenu-button a:active {
	transition: all ease 0.1s;
}

@media (min-width: 1025px) {
	/* Buttons van mobiel menu laten verdwijnen */
	#open-menu {
		display: none;
	}

	#sluit-menu {
		display: none;
	}
}

/* Styling menu voor mobiele schermen */
@media (max-width: 1024px) {
	header {
		justify-content: space-between;
		padding: 1.5rem 3rem;
	}

	header > a > svg {
		/* Logo */
		width: auto;
		height: 2rem;
	}

	nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--menu-color);
		transform: translateY(-100%); /* Menu schuift uit beeld */
		transition: all ease 0.5s;
	}

	.toon-menu {
		/* Class wordt toegevoegd d.m.v. JS en laat de menu terug schuiven */
		transform: translateY(0%);
	}

	nav ul {
		flex-direction: column;
		gap: 1rem;
	}

	nav ul a {
		font-size: 2rem;
		margin: 0;
	}

	.hoofdmenu-button a {
		background-color: inherit;
		padding: 0;
		border: none;
		border-radius: none;
	}

	.hoofdmenu-button svg {
		display: none;
	}

	.hoofdmenu-button a:hover,
	.hoofdmenu-button a:focus {
		transition: all ease 0.1s;
		border-radius: 0;
	}

	/* Open & Sluiten buttons */
	header button {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	header button svg {
		display: flex;
		width: 2rem;
		height: auto;
	}

	#open-menu {
		color: var(--primary-color);
		background-color: inherit;
		border: none;
	}

	#sluit-menu {
		color: var(--white);
		background-color: var(--primary-color);
		display: flex;
		padding: 1rem;
		border-radius: 50%;
		border: none;
		position: fixed;
		bottom: 5rem;
	}
}

/* ========================== */
/* Highlight dikgedrukt tekst */
/* ========================== */
.dikgedrukt800 {
	font-weight: 800;
}

.dikgedrukt600 {
	font-weight: 600;
}

/* ============ */
/* Home styling */
/* ============ */
#home {
	background-color: var(--background1);
	padding: 5rem 10rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	align-items: center;
}

#home img {
	width: 20rem;
	height: auto;
	justify-self: center;
}

#home-tekst h1 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 2.25rem;
	color: var(--black-white);
	display: grid;
	margin: 0;
}

#home-tekst p {
	margin: 1rem 0rem;
	display: grid;
	gap: 0.5rem;
}

#home-tekst .scheiding {
	color: var(--primary-color);
}

@media (max-width: 1024px) {
	/* Home versie mobiele schermen */
	#home {
		padding: 3rem;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: auto;
		gap: 1.5rem;
		justify-items: center;
	}

	#home-tekst {
		display: grid;
		justify-items: center;
		text-align: center;
	}

	#home img {
		order: -1;
		width: 15rem;
		height: auto;
	}
}

@media (max-width: 480px) {
	#home img {
		width: 10rem;
		height: auto;
	}
}

/* ================ */
/* Over mij styling */
/* ================ */
#over-mij {
	background-color: var(--background2);
	padding: 5rem 10rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	align-items: center;
}

#over-mij img {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	order: -1; /* Afbeelding als eerste weergeven */
}

#over-mij-tekst p {
	margin-bottom: 1rem;
}

@media (max-width: 1024px) {
	/* Over mij versie mobiele schermen */
	#over-mij {
		grid-template-columns: repeat(1, 1fr);
		justify-items: center;
		gap: 2rem;
		padding: 3rem;
	}

	#over-mij img {
		order: 1; /* Afbeelding na tekst tonen */
		width: 50%;
		height: auto;
	}
}

@media (max-width: 480px) {
	#over-mij img {
		width: 100%;
		height: auto;
	}
}

/* ============== */
/* Skills styling */
/* ============== */
#skills {
	background-color: var(--background1);
	padding: 5rem 10rem;
}

#skills h2 {
	text-align: center;
	margin-bottom: 1rem;
}

#skills ul {
	/* 3 koloms grid */
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	grid-auto-rows: 1fr;
}

#skills li {
	/* Skills content in het midden en onder elkaar */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.skills-icon {
	/* Achtergrond skills iconen */
	background-color: var(--background2);
	display: flex;
	border-radius: 50%; /* Achtergrond rond maken */
	padding: 1.5rem;
	z-index: 2;
}

.skills-icon svg {
	width: 3rem;
	height: auto;
}

/* Kleur icon zelf */
.skills-icon-bg {
	fill: var(--primary-color);
}

.skills-icon-omlijning {
	fill: none;
	stroke: var(--black-white);
	stroke-width: 15;
	stroke-miterlimit: 10;
}

.skills-tekst {
	/* Tekst onder elkaar en in het midden incl. achtergrond */
	background-color: var(--background3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 0.5rem;
	width: 100%;
	height: 100%;
	padding: 2rem 0;
	margin-top: -1.5rem; /* Icon tekst laten overlappen */
}

.skills-tekst h3 {
	/* Titel van de skills */
	margin: 0 1rem;
}

.skills-tekst p {
	margin: 0 1rem;
}

.skills-tekst p.peper {
	color: var(--peper-color);
}

.skills-tekst span {
	/* Peppers */
	filter: grayscale(1);
}

@media (max-width: 1024px) {
	/* Skills versie mobiele schermen */
	#skills {
		padding: 3rem;
	}

	#skills ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	#skills ul {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ================= */
/* Portfolio styling */
/* ================= */
.portfolio-3koloms {
	background-color: var(--background2);
	padding: 5rem 10rem;
}

.portfolio-3koloms h2 {
	text-align: center;
	margin-bottom: 1rem;
}

.portfolio-3koloms ul {
	/* 3 koloms grid */
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	grid-auto-rows: 1fr;
}

@media (max-width: 1024px) {
	/* Portfolio versie mobiele schermen */
	.portfolio-3koloms {
		padding: 3rem;
	}

	.portfolio-3koloms ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		grid-auto-rows: auto;
	}
}

@media (max-width: 480px) {
	/* Portfolio versie mobiele schermen */
	.portfolio-3koloms ul {
		grid-template-columns: repeat(1, 1fr);
	}
}

.portfolio-3koloms li {
	display: grid;
}

.portfolio-3koloms li a {
	background-color: var(--background1);
	text-decoration: none;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: all ease 0.5s;
}

.portfolio-3koloms img {
	width: 100%;
	height: auto;
}

.portfolio-item-tekst {
	margin: 1rem;
}

.portfolio-item-tekst h3 {
	transition: all ease 0.5s;
}

.portfolio-item-tekst ul {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.portfolio-item-tekst li {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: 0.85rem;
	color: var(--black-white-reverse);
	background-color: var(--primary-color);
	margin-top: 0.5rem;
	width: fit-content;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: all ease 0.5s;
}

.portfolio-3koloms li a:hover,
.portfolio-3koloms li a:focus {
	/* Portfolio item hover & focus */
	transform: scale(1.05);
}

.portfolio-3koloms li a:hover h3,
.portfolio-3koloms li a:focus h3 {
	/* Portfolio tekst hover & focus */
	color: var(--primary-color);
}

.portfolio-3koloms li a:hover li,
.portfolio-3koloms li a:focus li {
	/* Portfolio tekst hover & focus */
	background-color: var(--black-white);
}

.portfolio-3koloms li a:active li {
	/* Portfolio tekst active */
	background-color: var(--primary-color);
	transition: all ease 0.1s;
}

/* =================== */
/* Kennismaken styling */
/* =================== */
#kennismaken {
	background-color: var(--background1);
	padding: 5rem 10rem;
}

#kennismaken h2 {
	text-align: center;
	margin-bottom: 1rem;
}

#kennismaken ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	grid-auto-rows: 1fr;
	justify-items: center;
}

#kennismaken li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.kennismaken-icon {
	display: flex;
	background-color: var(--background2);
	border-radius: 50%;
	padding: 1.5rem;
}

.kennismaken-icon svg {
	width: 3rem;
	height: auto;
}

/* Icon kleur zelf */
.kennismaken-icon-bg {
	fill: var(--primary-color);
}

.kennismaken-icon-omlijning {
	fill: none;
	stroke: var(--black-white);
	stroke-width: 15;
	stroke-miterlimit: 10;
}

#kennismaken h3 {
	margin-top: 1rem;
}

#kennismaken p {
	font-weight: 400;
}

#kennismaken p a {
	color: var(--black-white);
}

#kennismaken > ul > li > .primary-button {
	/* Buttons */
	margin-top: 1rem;
}

@media (max-width: 1024px) {
	/* Kennismaken versie mobiele schermen */
	#kennismaken {
		padding: 3rem;
	}

	#kennismaken ul {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ======================================= */
/* Website system mode, light mode, dark mode */
/* ======================================= */
/* ========================================== */
/* Sectie instellingen van dark mode/light mode */
/* ========================================== */
.website-thema {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 0.5rem;
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
}

.thema-instellingen {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 0.5rem;
	transform: translateY(120%); /* Instellingen schuiven uit beeld */
	transition: all ease 0.5s;
}

/* Alle buttons */
.website-thema button {
	display: flex;
	background-color: var(--background1);
	border: solid 0.1rem var(--primary-color);
	border-radius: 50%;
	padding: 0.75rem;
	transition: all ease 0.5s;
	cursor: pointer;
}

.website-thema button svg {
	fill: var(--black-white);
	width: 1.5rem;
	height: auto;
}

@media (max-width: 480px) {
	.website-thema button svg {
		width: 2rem;
		height: auto;
	}
}

.website-thema button:hover,
.website-thema button:focus {
	transform: scale(1.1);
}

.website-thema button:active svg {
	fill: var(--primary-color);
}

/* Open en sluit buttons */
.website-thema button:last-of-type {
	background-color: var(--black-white);
	border-color: var(--black-white-reverse);
}

.website-thema button:last-of-type svg {
	fill: var(--black-white-reverse);
}

.website-thema button:last-of-type:hover,
.website-thema button:last-of-type:focus {
	background-color: var(--black-white-reverse);
	border-color: var(--black-white);
	transform: scale(1); /* Zodat de button even groot blijft en niet veranderd */
}

.website-thema button:last-of-type:hover svg,
.website-thema button:last-of-type:focus svg {
	fill: var(--black-white);
}

.website-thema button:last-of-type:active svg {
	fill: var(--primary-color);
	transition: all ease 0.1s;
}

/* Instellingen tonen */
.toon-instellingen {
	transform: translateY(0%);
}

/* Button open instellingen verstoppen */
.hide-button {
	display: none !important;
}

/* Button open instellingen positie */
.button-positie {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
}

/* Geselecteerde button (system mode, light mode & dark mode) */
button.geselecteerd {
	background-color: var(--primary-color);
	cursor: default;
}

button.geselecteerd:hover,
button.geselecteerd:focus {
	transform: scale(1); /* Zodat de button even groot blijft en niet veranderd */
}

/* ====== */
/* Footer */
/* ====== */
footer {
	background-color: var(--background3);
	padding: 0.5rem 0rem;
}

footer p {
	font-weight: 400;
	font-size: 0.75rem;
	text-align: center;
}

/* ============== */
/* Project pagina */
/* ============== */
/* Project */
.project-info {
	background-color: var(--background1);
	padding: 5rem 10rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	align-items: center;
}

.project-info img,
.project-info video {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	order: -1; /* Afbeelding als eerste weergeven */
}

@media (min-width: 1248px) {
	.project-info img.width {
		width: 80%;
	}
}

/* Front-end development prototype netflix website */
.project-info iframe {
	width: 100%;
	height: 80%;
	order: -1;
	border: solid 0.1rem var(--black-white);
	border-radius: 0.5rem;
}

.project-info-tekst h2 {
	display: grid;
	margin-bottom: 1rem;
}

.project-info-tekst h2 span {
	font-size: 1.5rem;
	font-weight: 400;
}

.project-info-tekst p {
	margin-bottom: 1rem;
}

@media (max-width: 1024px) {
	/* Project versie mobiele schermen */
	.project-info {
		grid-template-columns: repeat(1, 1fr);
		justify-items: center;
		gap: 2rem;
		padding: 3rem;
	}

	.project-info img,
	.project-info video {
		order: 1; /* Afbeelding na tekst tonen */
		width: 50%;
		height: auto;
	}

	.project-info iframe {
		width: 75%;
		height: 40rem;
		order: 1;
	}
}

@media (max-width: 480px) {
	.project-info img,
	.project-info video {
		width: 100%;
		height: auto;
	}

	.project-info iframe {
		width: 110%;
		height: 40rem;
	}

	/* 2 buttons > project pagina */
	.project-info-tekst .buttons-inline {
		display: flex;
		flex-direction: column;
	}

	.project-info-tekst .buttons-inline a:first-of-type {
		margin-right: 0;
		margin-bottom: 1rem;
	}
}

/* ================ */
/* 404 error pagina */
/* ================ */
#error404 {
	background-color: var(--background1);
	padding: 5rem 10rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	align-items: center;
}

#error404 h2,
#error404 p {
	margin-bottom: 1rem;
}

/* 404 icon */
#error404-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

#error404-icon svg {
	width: 14.25rem;
	height: auto;
}

.error404-icon-omlijning {
	fill: none;
	stroke: var(--black-white);
	stroke-linejoin: round;
	stroke-width: 15px;
}

.error404-icon-color-1 {
	fill: var(--black-white);
}

.error404-icon-color2 {
	fill: var(--primary-color);
}

@media (max-width: 1024px) {
	/* 404 versie mobiele schermen */
	#error404 {
		padding: 3rem;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: auto;
		gap: 1.5rem;
		justify-items: center;
	}

	#error404-icon svg {
		width: 12.75rem;
		height: auto;
		margin-top: 1rem;
	}
}

@media (max-width: 480px) {
	#error404-icon svg {
		width: 8.75rem;
		height: auto;
	}
}