body {
  background-image: url("./img/bgCollageGrayScale.webp");
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  overflow-x: hidden;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 
        'Lucida Grande', 'Lucida Sans Unicode', 
        Geneva, Verdana, sans-serif;
}

h2 {
  text-align: left;
}

.logo {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 65%;
}

.menu-container {
  margin: 0 auto 30px auto; /* Center the container horizontally */
  width: 100%; /* Full width */
  max-width: 700px; /* Maximum width */
  font-size: 1.5em;
  text-align: center;
  padding: 0 10px; /* Prevent sticking to the sides */
  box-sizing: border-box;
}

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust columns to be flexible */
  grid-gap: 4px; /* Consistent 4px gap between items */
  width: 100%; /* Full width */
  box-sizing: border-box; /* Include padding and borders in size */
}

.menu-item {
  background-image: linear-gradient(#fe7e01, #ebf700);
  text-align: center;
  margin: 0; /* No margin around items */
  padding: 10px 15px; /* Padding to ensure text fits */
  border: 1px solid #321414;
  border-radius: 10px;
  word-wrap: break-word; /* Prevent text overflow */
  font-size: clamp(1rem, 2.5vw, 1.2em); /* Responsive font size */
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  box-sizing: border-box; /* Include padding/borders in size */
}

.menu-item a {
  text-decoration: none;
  color: black; /* Ensure text is visible */
  display: block; /* Make anchor take up the entire space */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Content styles */
.content {
  width: 90%; /* Default width */
  max-width: 700px; /* Prevent content from growing too wide */
  background-image: linear-gradient(#fe7e01, #ebf700);
  margin: 0 auto 20px auto; /* Centered horizontally */
  margin-bottom: 40px;
  padding: 3% 5%;
  border: 1px solid #321414;
  border-radius: 15px;
  text-align: center;
}

.left {
  text-align: left;
}

.text-block {
  margin: 10px;
}

.text-link {
  text-decoration: none;
  color: indigo;
}

.news-button {
  width: 20%; /* Default width */
  max-width: 700px; /* Prevent content from growing too wide */
  background-image: linear-gradient(#fe7e01, #ebf700);
  margin: 0 auto 20px auto; /* Centered horizontally */
  padding: 5 px;
  border: 1px solid #321414;
  border-radius: 15px;
  text-align: center;
}

.footer {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 60%;
}

.footerLogo {
  display: block;
  float: right;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 45%;
}

.contact {
  width: 40%; /* Default width */
  float: left;
  max-width: 700px; /* Prevent content from growing too wide */
  background-image: linear-gradient(#fe7e01, #ebf700);
  margin: 0 auto 20px auto; /* Centered horizontally */
  margin-bottom: 40px;
  padding: 3% 5%;
  border: 1px solid #321414;
  border-radius: 15px;
  text-align: center;
}

.image {
  margin-top: 20px;
  border: 1px solid #321414;
  width: 100%;
}

.bold {
  font-weight: bold;
}

/* Responsive design for normal screens */
@media (max-width: 768px) {
  .logo {
    width: 95%;
  }

  .menu-container {
    font-size: 1.2em;
    margin-bottom: 15px;
  }

  .content {
    padding: 5%;
  }

  .news-button {
    width: 60%;
  }

  .footer {
    width: 90%;
  }

  .contact {
    width: 90%;
  }

  .footerLogo {
    width: 100%;
  }

  .mobile-video {
    width: 100%;
  }
}

/* When screen width is between 292px and 335px */
@media (max-width: 335px) and (min-width: 292px) {
  .menu-container {
    font-size: 1.1em;
    max-width: 100%; /* Ensure full width without overflow */
  }

  .menu {
    grid-template-columns: repeat(2, 1fr); /* Two items per row */
  }

  .menu-item {
    padding: 8px;
    font-size: 1em; /* Adjust font size */
  }
}

/* When screen width is between 292px and 215px, force the last two items to wrap */
@media (max-width: 292px) and (min-width: 215px) {
  .menu {
    grid-template-columns: 1fr; /* Force one item per row */
  }
}

/* For screens below 215px, adjust the menu items to fit better */
@media (max-width: 215px) {
  .menu-container {
    font-size: 0.9em; /* Smaller font size for very small screens */
    max-width: 100%;
  }

  .menu {
    grid-template-columns: 1fr; /* One item per row */
  }

  .menu-item {
    padding: 5px; /* Adjust padding */
    font-size: 0.9em; /* Adjust font size */
  }
}

/* For larger screens, ensure the menu items fit nicely */
@media (min-width: 1060px) {
  .menu-container {
    font-size: 1.5em; /* Default font size */
    max-width: 700px; /* Keep the width from growing too wide */
    padding: 0 20px; /* Added padding for larger screens */
    text-align: center; /* Ensuring centering */
  }

  .menu-item {
    padding: 12px 20px; /* Increased padding for wider items */
  }

  .menu {
    grid-template-columns: repeat(4, 1fr); /* Four items per row on large screens */
    gap: 4px; /* Consistent gap */
  }
}

/*
Colors
geel: #ebf700
oranje: #fe7e01
randen: #321414
paars: #4c008e
*/