/* Algemene stijlen */
@font-face {
    font-family: 'Serif'; /* Vervang met de naam die je wilt gebruiken in je CSS */
    src: url('Serif.ttf') format('truetype'); /* Pas het pad en format aan naar je bestand */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sans'; /* Voor een tweede lettertype, indien nodig */
    src: url('Sans.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

h1, h3, p, li {
    font-family: 'Serif', serif; /* of een vergelijkbaar serif lettertype */
    margin: 0;
    line-height: 2; /* Regelafstand lijkt iets groter dan standaard */
}

h2, h4 {
    font-family: 'Sans', sans-serif; /* of een vergelijkbaar serif lettertype */
    margin: 0;
    line-height: 2; /* Regelafstand lijkt iets groter dan standaard */
}

a {
    font-family: 'Sans', sans-serif;
	color: #2079c7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 960px; 
    margin: 0 auto;
}

h1 {
    font-size: 40px; /* Grotere lettergrootte voor de naam */
	color: #000000;
}

h2 {
	font-size: 20px;
	font-weight: bold;
	color: #2079c7;
}

h3 {
    font-size: 18px; /* Kleinere koptekst voor secties */
	color: #000000;
}

h4 {
    font-size: 12px; /* Kleinere koptekst voor secties */
	color: #666666;
}

li, p {
    font-size: 16px; /* Kleinere koptekst voor secties */
	color: #1c1c1c;
}

ul {
    margin: 0;
	padding: 0;
}

#vaardigheden ul, #talen ul, #software ul, #programmeertalen ul {
	list-style: none;
}	

#ervaring ul {
    padding-left: 20px;
}

nav {
    background-color: #ffffff; /* Lichte achtergrondkleur */
    text-align: center;
	max-width: 960px; /* Beperk de breedte van de navbar */
    margin: 0 auto; /* Centreer de navbar horizontaal */
	position: fixed; /* Zet de positie vast */
	top: 0; /* Plaats de navbar bovenaan */
	left: 1; /* Plaats de navbar links */
	width: 100%; /* Zorg ervoor dat de navbar de volledige breedte van het scherm inneemt */
	z-index: 1000; /* Zorg ervoor dat de navbar boven andere elementen op de pagina blijft */
}

body {
	padding-top: 20px; /* Pas dit aan naar de hoogte van je navigatiebalk */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Gebruik flexbox voor horizontale uitlijning */
    justify-content: center; /* Centreer de items */
    justify-content: flex-start; /* Lijn de items links uit */
}

nav li {
    font-weight: bold;
}

nav a {
    display: inline-block; /* Zorg ervoor dat de links als blokken worden weergegeven */
    padding: 4px 10px; /* Voeg wat padding toe */
    transition: background-color 0.3s; /* Een soepele overgang voor de achtergrondkleur bij hover */
	text-decoration: none;
	font-size: 14px;
}

nav a:hover {
    background-color: #2079c7; /* Lichter grijs bij hover */
	color: #ffffff;
	text-decoration: none;
}

footer {
    text-align: center;
	padding-top: 100px;
}

/* Header */
header {
    padding: 20px 0; /* Kleinere padding dan eerder */
}



.occupation {
	padding-bottom: 20px;
}


.oud {
  display: flex; /* Schakel flexbox in */
  justify-content: flex-start; /* Verdeel de ruimte gelijkmatig tussen de items */
}

/* Optioneel: voeg wat ruimte toe tussen de items */
.oud .occupation {
  margin-right: 100px; /* Voeg bijvoorbeeld 20px marge toe aan de rechterkant */
}

/* Verwijder de onderste marge van het laatste item om te voorkomen dat er extra ruimte onder komt */
.oud .occupation:last-child {
  margin-right: 0;
}

.kolom {
  display: flex; /* Schakel flexbox in */
  /* justify-content: flex-start; */ /* Verdeel de ruimte gelijkmatig tussen de items */
}

/* Optioneel: voeg wat ruimte toe tussen de items */
.kolom .occupation {
  margin-right: 50px; /* Voeg bijvoorbeeld 20px marge toe aan de rechterkant */
}

/* Verwijder de onderste marge van het laatste item om te voorkomen dat er extra ruimte onder komt */
.kolom .occupation:last-child {
  margin-right: 0;
}

.project-image {
    text-align: center; /* Centreer de afbeelding horizontaal */
    margin-top: 10px; /* Voeg wat ruimte toe onder de afbeelding */
}

.project-image img {
    max-width: 100%; /* Zorg ervoor dat de afbeelding niet breder wordt dan de container */
    height: auto; /* Behoud de beeldverhouding */
}

.logo-image {
    text-align: center; /* Centreer de afbeelding horizontaal */
    margin-top: 10px; /* Voeg wat ruimte toe onder de afbeelding */
}

.logo-image img {
    max-width: 50px; /* Zorg ervoor dat de afbeelding niet breder wordt dan de container */
    height: auto; /* Behoud de beeldverhouding */
}