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

body {
  background: url("../images/about_achtergrond.jpeg") repeat center center/cover;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Tape bovenaan */
.tape-about {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 5;
}

/* Terugknop */
.tape-terug {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  z-index: 10;
  transition: transform 0.3s ease;
}

.tape-terug:hover {
  transform: scale(1.08);
}

/* Stack container */
.stack {
  position: relative;
  width: 30vw;
  height: 500px;
  margin: 200px auto 50px; /* verhoog dit van 120px naar 200px */
  cursor: pointer;
  transition: transform 0.5s ease;
}

.kaart {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  max-width: 400px;
  transition: transform 1s ease;
  transform-origin: center center;
  transform: translate(0vw, 5vh) scale(0.6);
}

/* Beginstand: rommelig gestapeld */
.stack:not(.open) .kaart1 { transform: rotate(-6deg); z-index: 14; }
.stack:not(.open) .kaart2 { transform: rotate(4deg); z-index: 13; }
.stack:not(.open) .kaart3 { transform: rotate(-3deg); z-index: 12; }
.stack:not(.open) .kaart4 { transform: rotate(7deg); z-index: 11; }
.stack:not(.open) .kaart5 { transform: rotate(-6deg); z-index: 10; }
.stack:not(.open) .kaart6 { transform: rotate(10deg); z-index: 9; }
.stack:not(.open) .kaart7 { transform: rotate(-8deg); z-index: 8; }
.stack:not(.open) .kaart8 { transform: rotate(4deg); z-index: 7; }
.stack:not(.open) .kaart9 { transform: rotate(-2deg); z-index: 6; }
.stack:not(.open) .kaart10 { transform: rotate(10deg); z-index: 5; }
.stack:not(.open) .kaart11 { transform: rotate(-2deg); z-index: 4; }
.stack:not(.open) .kaart12 { transform: rotate(3deg); z-index: 3; }
.stack:not(.open) .kaart13 { transform: rotate(-10deg); z-index: 2; }
.stack:not(.open) .kaart14 { transform: rotate(6deg); z-index: 1; }

/* Uitklappen bij klik */
.stack.open .kaart1 /* HTML */{
  transform: translate(+100px, +360px) rotate(-10deg)scale(0.4);
  z-index: 14;
}
.stack.open .kaart2 /* PR */{
  transform: translate(-100px, +350px) scale(0.4);
  z-index: 14;
}
.stack.open .kaart3 /* BLENDER */{
  transform: translate(+90px, +250px) scale(0.4);
  z-index: 14;
}
.stack.open .kaart4 /* IKKE */{
  transform: translate(+300px, 40px)scale(1.2);
   z-index: 14;
}
.stack.open .kaart5 /* BLOEM STICKER */{
  transform: translate(-400px, -310px) rotate(8deg);
  z-index: 14;
}
.stack.open .kaart6 /* SKILLS TAPE */{
  transform: translate(+10px, +30px);
  z-index: 14;
}
.stack.open .kaart7 /* BONNETJE */{
  transform: translate(+650px, 40px)scale(1.3);
}
.stack.open .kaart8 /* ID */{
  transform: translate(+50px, +130px) scale(0.4);
  z-index: 14;
}
.stack.open .kaart9 /* YELLOW NOTE */{
  transform: translate(-500px, +50px)scale(1.4);
}
.stack.open .kaart10 /* POLAROID */{
  transform: translate(-300px, -180px)scale(1.1);
}
.stack.open .kaart11 /* STICKY NOTE */{
  transform: translate(-600px, -120px) rotate(2deg)scale(1.1);
}
.stack.open .kaart12 /* DOORZICHTIGE NOTE */{
  transform: translate(+10px, +200px) scale(1.1);
}
.stack.open .kaart13 /* PS */{
  transform: translate(-50px, +210px) scale(0.4);
}
.stack.open .kaart14 /* AI */{
  transform: translate(-100px, +130px) scale(0.4);
}

/* Footer styling (optioneel verbeteren) */
.footer {
  text-align: center;
  margin-top: 80px;
  padding: 10px;
  color: #000;
  font-size: 14px;
}
.footer a {
  display: block;
  margin-top: 4px;
  text-decoration: none;
  color: #333;
}

@media (max-width: 768px) {

.stack.open .kaart1 /* HTML */{
  transform: translate(+100px, +290px) rotate(-10deg)scale(0.8);
  z-index: 14;
}
.stack.open .kaart2 /* PR */{
  transform: translate(-100px, +350px) scale(0.8);
  z-index: 14;
}
.stack.open .kaart3 /* BLENDER */{
  transform: translate(+900px, +250px) scale(0.8);
  z-index: 14;
}
.stack.open .kaart4 /* IKKE */{
  transform: translate(+300px, 40px)scale(1.5);
   z-index: 14;
}
.stack.open .kaart5 /* BLOEM STICKER */{
  transform: translate(-400px, -310px) rotate(8deg);
  z-index: 14;
}
.stack.open .kaart6 /* SKILLS TAPE */{
  transform: translate(+10px, +30px);
  z-index: 14 scale(1.8);
}
.stack.open .kaart7 /* BONNETJE */{
  transform: translate(+650px, 40px)scale(1.8);
}
.stack.open .kaart8 /* ID */{
  transform: translate(+50px, +130px) scale(0.8);
  z-index: 14;
}
.stack.open .kaart9 /* YELLOW NOTE */{
  transform: translate(-500px, +50px)scale(1.8);
}
.stack.open .kaart10 /* POLAROID */{
  transform: translate(-300px, -180px)scale(1.6);
}
.stack.open .kaart11 /* STICKY NOTE */{
  transform: translate(-600px, -120px) rotate(2deg)scale(1.6);
}
.stack.open .kaart12 /* DOORZICHTIGE NOTE */{
  transform: translate(+30px, +400px) scale(1.4);
}
.stack.open .kaart13 /* PS */{
  transform: translate(-50px, +210px) scale(0.8);
}
.stack.open .kaart14 /* AI */{
  transform: translate(-100px, +130px) scale(0.8);
}
    .footer strong {
    font-size: 18px; /* naam kleiner */
  }

  .footer a {
    font-size: 16px; /* e-mail kleiner */
  }
}