@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%;
}

/* Algemene styling voor afbeeldingen */
.vlag,
.poster,
.visitekaartje1,
.visitekaartje2,
.briefpapier {
  position: absolute;
  display: block;
}

.vlag img,
.poster img,
.visitekaartje1 img,
.visitekaartje2 img,
.briefpapier img {
  width: 100%;
  height: auto;
  display: block;
}

/* FULL-SCREEN DESKTOP BASIS LAYOUT */
.vlag {
  top: 37vh;
  left: 7vw;
  width: clamp(150px, 23vw, 400px);
  z-index: 9999;
}

.poster {
  top: 31vh;
  left: 35vw;
  width: clamp(200px, 15vw, 350px);
  z-index: 9999;
  background-color: white;
}

.visitekaartje1 {
  top: 33.5vh;
  left: 55vw;
  width: clamp(150px, 13vw, 300px);
  z-index: 9999;
  background-color: white;
}

.visitekaartje2 {
  top: 52.5vh;
  left: 55vw;
  width: clamp(150px, 13vw, 300px);
  z-index: 9999;
  background-color: white;
}

.briefpapier {
  top: 32vh;
  left: 74vw;
  width: clamp(150px, 15vw, 300px);
  z-index: 9999;
  background-color: white;
}

.terug-knop {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  cursor: pointer;
  opacity: 20%;
}

.spacer {
  height: 150px; /* of meer indien nodig */
  width: 100%;
}

/* Grote desktops / kleine laptops: 1600px → 1025px */
@media screen and (max-width: 1400px) and (min-width: 1025px) {
  .vlag {
    top: 34vh;
    left: 7vw;
    width: clamp(130px, 22vw, 350px);
  }
  .poster {
    top: 31vh;
    left: 33vw;
    width: clamp(180px, 14vw, 320px);
  }
  .visitekaartje1 {
    top: 32.5vh;
    left: 52vw;
    width: clamp(150px, 13vw, 280px);
  }
  .visitekaartje2 {
    top: 48vh;
    left: 52vw;
    width: clamp(150px, 13vw, 280px);
  }
  .briefpapier {
    top: 31vh;
    left: 70vw;
    width: clamp(180px, 14vw, 320px);
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .vlag {
    top: 15vh;
    left: 8vw;
    width: clamp(140px, 40vw, 400px);
  }
  .poster {
    top: 10vh;
    left: 60vw;
    width: clamp(180px, 25vw, 350px);
  }
  .visitekaartje1 {
    top: 53vh;
    left: 15vw;
    width: clamp(180px, 25vw, 350px);
  }
  .visitekaartje2 {
    top: 75vh;
    left: 15vw;
    width: clamp(180px, 25vw, 350px);
  }
  .briefpapier {
    top: 54vh;
    left: 60vw;
    width: clamp(180px, 25vw, 350px);
  }
}

/* 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;
  }
  .terug-knop {
    content: url("../assets/images/achtegrond\ mobile\ groen.webp");
  }
  .spacer {
    height: 150px; /* of meer indien nodig */
    width: 100%;
  }
  .container {
    min-height: 280vh; /* verhoog dit tot je genoeg ruimte ziet: 260vh is een voorbeeld */
  }
  .vlag {
    top: 10vh;
    left: 10vw;
    width: 80vw;
  }
  .poster {
    top: 57vh;
    left: 15vw;
    width: 70vw;
  }
  .visitekaartje1 {
    top: 141vh;
    left: 15vw;
    width: 70vw;
  }
  .visitekaartje2 {
    top: 181vh;
    left: 15vw;
    width: 70vw;
  }
  .briefpapier {
    top: 221vh;
    left: 15vw;
    width: 70vw;
  }
}