body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgba(168, 166, 94, 0.21);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #06893a;
  color: white;
  padding: 10px 0;
  text-align: center;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  background-color: #08a432;
}

nav li a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

.main {
  background-color: white; /* Witte achtergrond */
  color: black; /* Zwarte tekst */
  max-width: 1200px; /* Maximale breedte van het centrale witte gedeelte */
  width: 90%; /* Breedte op kleinere schermen */
  margin: 100px auto; /* Ruimte boven en onder de container */
  padding: 20px; /* Ruimte binnen de container */
  border-radius: 10px; /* Afgeronde hoeken */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;

  bottom: 0;
  width: 100%;
}
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}

form label {
  font-weight: bold;
}

form input,
form select,
form textarea,
form button,
form label {
  padding: 10px;
  font-size: 1rem;
  width: 100%;
}

form button {
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  padding: 10px;
}

form button:hover {
  background-color: #555;
}
h2 {
  color: rgba(0, 179, 105, 0.799);
}
h3 {
  color: rgba(0, 179, 105, 0.799);
}
h2 {
  font-family: "Rubik Vinyl", sans-serif;
  text-align: center;
}

.gallery-img {
  width: 100%; /* Laat afbeeldingen de breedte van de container volgen */
  height: auto; /* Behoud de verhouding */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Voor laptops en desktops (minimaal 1024px breed) */

#tips {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.gallery {
  display: grid;
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(
      3,
      1fr
    ); /* Drie kolommen op grotere schermen */
  }
  .gallery-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
}