@font-face {
  font-family: Satoshi;
  src: url(./fonts/Satoshi-Bold\ kopie.ttf);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: gainsboro;
  overflow-x: hidden;
}

/* Container */
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Basis styling voor afbeeldingen */
.p1,
.p2,
.p3,
.poster {
  position: absolute;
  display: block;
}

.p1 img,
.p2 img,
.p3 img,
.poster img {
  width: 100%;
  height: auto;
  display: block;
}

/* DESKTOP LAYOUT */
.p1 {
  top: 22vh;
  left: 16vw;
  width: clamp(120px, 20vw, 300px);
  z-index: 9999;
}

.p2 {
  top: 22vh;
  left: 41vw;
  width: clamp(120px, 20vw, 300px);
  z-index: 9999;
}

.p3 {
  top: 47vh;
  left: 41vw;
  width: clamp(120px, 20vw, 300px);
  z-index: 9999;
}

.poster {
  top: 22vh;
  left: 66vw;
  width: clamp(120px, 20vw, 300px);
  z-index: 9999;
}

/* Terug-knop */
.terug-knop {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  cursor: pointer;
  opacity: 20%;
}
/* Grote desktops / kleine laptops: 1600px → 1200px */
@media screen and (max-width: 1350px) and (min-width: 1025px) {
  .p1 {
    top: 22vh;
    left: 16vw;
    width: clamp(120px, 20vw, 300px);
    z-index: 9999;
  }

  .p2 {
    top: 22vh;
    left: 41vw;
    width: clamp(120px, 20vw, 300px);
    z-index: 9999;
  }

  .p3 {
    top: 43vh;
    left: 41vw;
    width: clamp(120px, 20vw, 300px);
    z-index: 9999;
  }

  .poster {
    top: 22vh;
    left: 66vw;
    width: clamp(120px, 20vw, 300px);
    z-index: 9999;
  }
}
/* TABLET */
@media screen and (max-width: 1024px) {
  .p1 {
    top: 15vh;
    left: 16vw;
    width: clamp(120px, 30vw, 200px);
    z-index: 9999;
  }

  .p2 {
    top: 15vh;
    left: 45vw;
    width: clamp(120px, 60vw, 400px);
    z-index: 9999;
  }

  .p3 {
    top: 55vh;
    left: 45vw;
    width: clamp(120px, 60vw, 400px);
    z-index: 9999;
  }

  .poster {
    top: 55vh;
    left: 16vw;
    width: clamp(120px, 30vw, 200px);
    z-index: 9999;
  }
}
/* 📱 MOBIEL */
@media screen and (max-width: 768px) {
    html, body {
    overflow: auto !important;
    height: auto !important;
  }

  .cursor-dot {
    display: none !important;
  }

  .hover-image {
    display: none !important;
    opacity: 0 !important;
  }
  .container {
    min-height: 255vh; /* meer scrollruimte voor mobiele weergave */
  }

  .p1 {
    top: 10vh;
    left: 18vw;
    width: 65vw;
  }

  .p2 {
    top: 90vh;
    left: 13vw;
    width: 75vw;
  }

  .p3 {
    top: 136vh;
    left: 13vw;
    width: 75vw;
  }

  .poster {
    top: 182vh;
    left: 18vw;
    width: 65vw;
  }

  .terug-knop {
    content: url("../assets/images/achtergrond\ mobile\ rood.webp");
  }
}