/* Algemeen */
* {
  box-sizing: border-box; /* Dit zorgt ervoor dat de padding en border worden meegerekend in de totale breedte en hoogte van elementen */
}

body {
  font-family: Arial, sans-serif; /* Het lettertype voor de tekst op de pagina */
  background-color: #f8d7e5; /* De achtergrondkleur van de pagina is lichtroze */
  color: #333; /* De tekstkleur is donkergrijs */
  margin: 0; /* Verwijdert de standaardmarge rondom de pagina */
}

/* Header */
header {
  background-color: #d985c8; /* De achtergrondkleur van de header is een lichtpaarse tint */
  padding: 10px 0; /* Geeft de header boven- en ondermarges van 10px */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Voegt een schaduweffect toe onder de header */
}

nav ul {
  list-style: none; /* Verwijdert de opsommingstekens uit de lijst */
  display: flex; /* Zet de navigatie-items naast elkaar */
  justify-content: center; /* Centreert de items in de navigatiebalk */
  padding: 0; /* Verwijdert de standaard padding van de lijst */
  margin: 0; /* Verwijdert de standaard marge van de lijst */
}

nav ul li {
  margin: 0 15px; /* Voegt een marge van 15px toe tussen de navigatie-items */
}

nav ul li a {
  text-decoration: none; /* Verwijdert de onderstreping van de links */
  color: white; /* De tekstkleur van de links is wit */
  font-weight: bold; /* Zet de tekst vetgedrukt */
  padding: 10px 20px; /* Voeg padding toe aan de links */
  background-color: #ff65b5; /* De achtergrondkleur van de links is roze */
  border-radius: 5px; /* Maakt de hoeken van de links afgerond */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Voegt een schaduweffect toe aan de links */
}

nav ul li a:hover {
  background-color: #e14c98; /* Verandert de achtergrondkleur wanneer de link wordt ingedrukt */
}

/* Hoofdsectie */
main {
  display: flex; /* Zorgt ervoor dat de sectie flexbox gebruikt voor het uitlijnen van items */
  justify-content: center; /* Centreert de inhoud van de hoofdsectie */
  padding: 40px 20px; /* Voegt padding toe aan de hoofdsectie */
}

/* Project sectie */
.projects {
  display: flex; /* Maakt gebruik van flexbox om de projectitems naast elkaar te zetten */
  flex-wrap: wrap; /* Zorgt ervoor dat de projecten naar de volgende rij gaan wanneer de ruimte niet genoeg is */
  justify-content: space-between; /* Zorgt ervoor dat er gelijke ruimte is tussen de projecten */
  gap: 20px; /* Voeg een tussenruimte van 20px toe tussen de projecten */
  max-width: 1200px; /* De maximale breedte van de sectie is 1200px */
  margin: 0 auto; /* Centreert de sectie horizontaal */
}

/* Project box */
.project {
  background-color: white; /* De achtergrondkleur van elk project is wit */
  border-radius: 10px; /* De hoeken van de projecten zijn afgerond */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Voegt een schaduweffect toe aan elk project */
  width: 32%; /* Zorgt ervoor dat elk project 32% van de breedte van de container in beslag neemt */
  padding: 20px; /* Voeg padding toe aan elk project */
  text-align: center; /* Centreert de tekst in de projectboxen */
  transition: transform 0.3s ease; /* Voegt een overgang toe bij hover-effecten */
}

.project:hover {
  transform: scale(1.05); /* Verandert de grootte van het project wanneer je erover hovert */
}

/* Afbeelding in projecten */
.project img {
  width: 100%; /* Zorgt ervoor dat de afbeelding de volledige breedte van het project inneemt */
  height: auto; /* Zorgt ervoor dat de afbeelding zijn aspect ratio behoudt */
  border-radius: 10px; /* De hoeken van de afbeelding zijn afgerond */
  object-fit: cover; /* Zorgt ervoor dat de afbeelding goed wordt bijgesneden */
  cursor: pointer; /* Verandert de cursor naar een handje om aan te geven dat de afbeelding klikbaar is */
  transition: transform 0.3s ease; /* Voegt een overgang toe aan de afbeelding bij hover */
}

.project img:hover {
  transform: scale(1.1); /* Vergroot de afbeelding iets wanneer je erover hovert */
}

/* Project titels en tekst */
.project h2 {
  color: #d985c8; /* De kleur van de projecttitels is lichtpaars */
  margin-top: 20px; /* Voeg bovenmarge toe aan de titels */
}

.project p {
  font-size: 16px; /* Stel de tekstgrootte in voor de beschrijvingen */
  margin-top: 10px; /* Voeg bovenmarge toe aan de beschrijvingen */
}




/* Mobile devices */
@media (max-width: 768px) {
  .project {
    width: 48%; /* Zorgt ervoor dat de projecten naast elkaar komen op kleinere schermen */
  }
}

@media (max-width: 480px) {
  .project {
    width: 100%; /* Zorgt ervoor dat elk project op zichzelf staat op de kleinste schermen */
  }
}

/* Footer styling */
footer {
  background-color: #d985c8; /* De achtergrondkleur van de footer is dezelfde als de header */
  color: white; /* De tekstkleur in de footer is wit */
  text-align: center; /* Centreert de tekst in de footer */
  padding: 20px 0; /* Voegt boven- en ondermarge toe aan de footer */
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2); /* Voegt een schaduweffect toe boven de footer */
  font-size: 14px; /* De tekstgrootte in de footer is kleiner */
  position: relative; /* Zet de positie van de footer in de normale stroom van de pagina */
  width: 100%; /* De footer neemt de volledige breedte van de pagina in */
}

footer p {
  margin: 0; /* Verwijdert de marge van de tekst in de footer */
  font-weight: bold; /* Zet de tekst vetgedrukt */
}
footer .social-links {
  margin-top: 10px; /* Zorgt ervoor dat er wat ruimte is tussen de copyright tekst en de links */
}

footer .social-links a {
  text-decoration: none; /* Verwijdert de onderstreping van de links */
  font-weight: bold; /* Maakt de tekst vetgedrukt */
  color: white; /* Zet de kleur van de tekst op wit */
  margin: 0 15px; /* Voegt ruimte toe tussen de links */
  font-size: 18px; /* Maakt de tekst iets groter */
  padding: 10px 20px; /* Voeg wat padding toe rond de tekst voor een mooiere uitstraling */
  border-radius: 5px; /* Maakt de hoeken van de links afgerond */
  background-color: #ff65b5; /* Zet een achtergrondkleur voor de links */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Voegt een subtiele schaduw toe voor diepte */
}

footer .social-links a:hover {
  background-color: #e14c98; /* Verandert de achtergrondkleur als de gebruiker over de link hovert */
}

footer .social-links a.whatsapp {
  background-color: #25D366; /* WhatsApp groen */
}

footer .social-links a.instagram {
  background-color: #E1306C; /* Instagram roze */
}

footer .social-links a:hover {
  background-color: #ff65b5; /* Zorgt ervoor dat de hoverkleur verandert naar roze */
}

}