@font-face {
  font-family: font;
  src: url(/fonts/NimbusSanL-Bol.otf);

}

@font-face {
  font-family: font_begin;
  src: url(/fonts/NimbusSanL-Reg.otf);
}

@font-face {
  font-family: font_brood;
  src: url(/fonts/Sligoil-Micro.otf);
}

/* Algemene stijlen */
body {
  margin: 0;
  font-family: font;
  scroll-behavior: smooth; /* Maakt het scrollen vloeiend */
}

.section {
  padding-left: 150px;
  padding-right: 100px;
  padding-top: 15px;
  min-height: 100vh; /* Zorgt ervoor dat elke sectie de volledige viewport in beslag neemt */
}

.tool-container{
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center; /* Centreert verticaal */
  height: auto;
  width: 100%;
  max-width: 100%;
}

#about {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  align-items: center; /* Centreert verticaal */
}

h1,
h2 {
  font-size: 60px;
  text-align: center;
}

#titel {
  font-size: 60px;
}

#hover-image {
  right: 47%;
  top: 70%;
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none; /* Voorkomt dat de afbeelding interacties ontvangt */
}

p {
  font-family: font_brood;
  text-align: center;
  margin-left: 300px;
  margin-right: 300px;
  font-size: 18px;
  line-height: 1.1;
}

.project-info {
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center;
}

#link {
  margin: 20px;
  font-family: font_brood;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center;
}
.video-container {
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center; /* Centreert verticaal */
}

.video-container video {
  max-width: 50%; /* Zorgt ervoor dat de video niet buiten de container treedt */
  max-height: 50%; /* Zorgt ervoor dat de video binnen de container past */
}

#p_about {
  width: auto;
  font-size: 36px;
  line-height: 1.1;
  font-family: font_begin;
  top: 50%;
}

.maakwijze {
  font-size: 15px;
  font-weight: bold;
  transform: translateY(-300%);
}

/* Navigatie menu */
.navbar {
  position: fixed;
  top: 5%;
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column; /* Zorgt ervoor dat de items verticaal worden gestapeld */
  align-items: flex-start; /* Optioneel: zorgt ervoor dat de items links uitgelijnd zijn */
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  margin-left: 20px;
  margin-bottom: 20px;
}

.navbar a {
  font-family: font_brood;
  text-justify: distribute;
  text-decoration-line: overline;
  text-decoration-thickness: 3px;
  text-decoration-color: rgb(132, 255, 0);
  color: black;
  font-size: 24;
}

.navbar a.active {
  color: rgb(15, 160, 199); /* Actieve kleur */
  text-decoration-thickness: 10px;
}

.navbar a:hover {
  color: rgb(15, 160, 199);
  text-decoration-thickness: 10px;
}

#sketch-container {
  width: 100%;
  max-width: 100%;
  transform: translateY(-5%);
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center; /* Centreert verticaal */
  height: auto;
}

#sketch-container2 {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-top: -100px;
  justify-content: center; /* Centreert horizontaal */
  align-items: center; /* Centreert verticaal */
  transform: scale(0.7);
  height: auto;
}

#canvas-container-3 {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center; /* Centreert horizontaal */
  align-items: center; /* Centreert verticaal */
  height: auto;
}

.project-gallery-container {
  display: flex;
  align-items: center; /* Centreert items verticaal */
  justify-content: center; /* Centreert items horizontaal */
  height: 100%; /* Zorg ervoor dat de container een hoogte heeft */
  background-color: #000000;
  position: relative;
  width: 50%; /* Of een andere waarde, afhankelijk van je ontwerp */
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* Zorgt ervoor dat alleen één afbeelding zichtbaar is */
}

.project-gallery-container-resize {
  position: relative;
  background-color: #000000;
  width: 30%; /* Of een andere waarde, afhankelijk van je ontwerp */
  max-width: 100%;
  align-items: center; /* Centreert items verticaal */
  justify-content: center; /* Centreert items horizontaal */
  margin: 0 auto;
  overflow: hidden; /* Zorgt ervoor dat alleen één afbeelding zichtbaar is */
}

.project-gallery {
  height: auto;
  margin: 10px;
  width: calc(100% * [number-of-images]); /* Pas [number-of-images] aan */
  display: flex;
  transition: transform 0.3s ease-in-out; /* Zorgt voor een vloeiende overgang wanneer je schakelt */
  background-color: #000000;
}

.project-gallery img {
  padding-left: 5%;
  padding-bottom: 5%;
  padding-top: 5%;
  padding-right: 5%;
  background-color: #000000;
  box-sizing: border-box; /* Zorgt ervoor dat de padding binnen de breedte valt */
  width: 100%;
  max-width: 100%;
  height: auto;
  flex-shrink: 0; /* Voorkomt dat afbeeldingen worden verkleind */
  display: block;
  object-fit: cover; /* Maakt de afbeelding goed passend binnen de container */
}

/* Pijltjes */
button {
  height: auto;
  position: absolute;
  background-color: transparent;
  color: rgb(255, 255, 255);
  border: rgb(132, 255, 0);
  cursor: pointer;
  font-size: 40px;
  z-index: 100;
}

button:hover {
  color: rgb(132, 255, 0);
}

.prev {
  position: absolute;
  top: 50%; /* Zorgt dat het midden van de knop zich op 50% bevindt */
  transform: translateY(-50%); /* Corrigeert voor de hoogte van de knop */
  left: 0%; /* Zorgt ervoor dat het aan de linkerkant blijft */
}

.next {
  position: absolute;
  top: 50%; /* Zorgt dat het midden van de knop zich op 50% bevindt */
  transform: translateY(-50%); /* Corrigeert voor de hoogte van de knop */
  right: 0%;
}