* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
  font-family: "neue-haas-grotesk-text", sans-serif;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 768px) {
  body {
    height: auto;
    overflow: auto;
  }
}

.text2 {
  margin-top: auto;
  padding-top: 2rem;
}


    .container {
      display: flex;
      height: 100vh;
      width: 100vw;
    }

    /* LINKERKOLUM */
    .sidebar {
      width: 25%;
      background: #ffffff;
      padding: 0rem;
      display: flex;
      flex-direction: column;
      gap: 0rem;
      overflow-y: auto;
      border-right: 0px solid #ffffff;
    }

    .project-btn {
      padding: 1rem;
      border-radius: 0px;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: "neue-haas-grotesk-text", sans-serif;
      font-size: 14px;
      font-weight: bold;
      transition: background 0.3s, color 0.3s;
      color: rgb(0, 0, 0);
    }

    .project-btn:hover {
      background: #eee;
      color: rgb(168, 219, 252);
    }

      .project-btn.active {
      background: #ddd;
      font-weight: bolder;
    }

    .pastel1 { background-color: rgb(166, 218, 252); }
    .pastel2 { background-color: rgb(249, 238, 125); }
    .pastel3 { background-color: rgb(52, 176, 128); }
    .pastel4 { background-color: rgb(74, 122, 194); }
    .pastel5 { background-color: rgb(239, 127, 160); }
    .pastel6 { background-color: rgb(85, 180, 214); }
    .pastel7 { background-color: rgb(216, 255, 161); }
    .pastel8 { background-color: rgb(192, 192, 192); }
    .pastel9 { background-color: rgb(163, 217, 229); }
    .pastel10 { background-color: rgb(231, 60, 48); }
    .pastel11 { background-color: rgb(91, 152, 99); }
    .pastel12 { background-color: rgb(237, 236, 156); }
    .pastel13 { background-color: rgb(247, 246, 247); }

    /* MIDDENKOLUM */
    .images {
      width: 45%;
      padding: 2rem;
      background: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
      height: 100vh;
    }

   .images img {
      width: 100%;
      height: auto;
      border-radius: 0px;
    }

    .images img:hover {
      box-shadow: 0 0 0px 0px rgb(195, 195, 195);
      z-index: 2;
      position: relative;
      max-width: 100%;
      height: auto;
      transition: box-shadow 0.1s ease, transform 0.1s ease;
      display: block;
    }

    /* RECHTERKOLUM */
    .description {
      width: 30%;
      padding: 2rem;
      background: #ffffff;
      font-size: 14px;
      color: rgb(0, 0, 0);
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      border-left: 0px solid #ffffff;
      overflow-y: auto;
  
    }

  /* MOBIEL APPARAAT */
    @media (max-width: 768px) {
      html {
    scroll-behavior: smooth;
  }
  body {
    font-size: 14px;
  }
  
   #imageContainer {
    scroll-margin-top: 100px; /* optioneel als je header zou hebben */
  }

  .container {
    flex-direction: column;
    height: auto;
    overflow-y: auto;
  }

  .sidebar,
  .images,
  .description {
    width: 100%;
    height: auto;
    padding: 1rem;
  }

  .sidebar {
    order: 1;
  }

  .images {
    order: 3;
  }

  .description {
    order: 2;
  }

  .sticky-buttons {
    position: static;
  }
}