/* Algemene stijl */
body {
  margin: 0;
  font-family: 'Playfair Display', serif;
  background-color: #f8f8f8;
  color: #111;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid #ccc;
}

header h1 {
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0.5px;
}

nav a {
  margin-left: 90px;
  text-decoration: none;
  color: #666;
  font-size: 20px;
  transition: color 0.3s ease;
  font-family: "chunkyfunks", fantasy;
}

nav a:hover {
  color: rgb(191, 73, 255);
}


#portfolio{
    font-family: "chunkyfunks", fantasy;
}

html {
  scroll-behavior: smooth;
}


/* Hero sectie */
.hero {
  text-align: center;
  margin: 80px 0 40px 0;
    position: relative;
}

.hero h2 {
  font-size: 100px;
  font-family: "chunkyfunks", fantasy;
  font-weight: 400;
  letter-spacing: 2px;
  position: absolute;
  top: -160px;
  left: 100px;
  z-index: 2;
  animation: slideInLeft 1s ease-out forwards;
}

.naam-lisanne {
  color: black;
   transition: text-shadow 0.3s ease;
   text-shadow: 4px 12px rgba(60, 58, 61, 0.584);
}

.naam-lisanne:hover {
  color: black;
text-shadow: 4px 12px rgb(191, 73, 255);
}




@font-face {
  font-family: 'chunkyfunks'; 
  src: url('./fonts/chunky_funks/Chunky\ Funks.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Nieuwe split-layout */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  height: auto;
  margin-top: 120px;
}

.hero-photo {
  background: linear-gradient(145deg, #d7d1cb, #f0ede9);
  border-radius: 30px;
  margin-left: 42px;
  background-image: url(img/SMC04384.jpg);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-right: 40px;
  padding-bottom: 80px;
   animation: fadeUp 1s ease-out forwards;
}

.hero-about {
  background: #f9f9f9;
  text-align: left;
  padding: 20px 60px 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "chunkyfunks", fantasy;
  margin-top: 30px;
}

.hero-about h3 {
  font-size: 60px;
  font-weight: 400;
  margin-bottom: -25px; /* negatieve marge zorgt voor subtiele overlap */
  z-index: 2;
  line-height: 1;
}


.Aboutme{
  color: white;
  text-shadow: 
  -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black,
  4px 12px rgba(60, 58, 61, 0.584);
}

.Aboutme:hover {
  text-shadow: 
  -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black,
  4px 12px rgb(191, 73, 255);
  transition: text-shadow 0.3s ease;
}

.Aboutme.active{
  text-shadow: 
    -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black,
    4px 12px rgb(191, 73, 255);
  transition: text-shadow 0.3s ease;
}




.hero-abouttekst {
  position: relative;
  background-color: white;
  color: black;
  padding: 40px 20px 80px 20px; /* extra onderruimte voor de overlap */
  border-radius: 20px;
  font-size: 1em;
  line-height: 1.6;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid black; /* ✅ dit is de nieuwe regel */
}


.hero-zin {
  position: absolute;
  bottom: -40px; /* schuift het vakje naar beneden over de onderrand */
  left: 100px;
  right: -20px;
  background-color: white;
  color: black;
  padding: 10px 0px;
  border-radius: 20px;
  font-style: italic;
  font-size: 1em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  max-width: fit-content;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid black; /* ✅ dit is de nieuwe regel */
}



#zin{
    font-style: italic;
}

/* Works sectie */
.works {
  padding: 10px;
  margin-top: 100px;
  background-color: black;
  border-radius: 30px;
  max-width: 1700px;
  margin-right: 20px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* altijd 3 kolommen */
  gap: 20px;
}


.work-item {
  background: #ccc;
  height: 350px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s ease, filter 0.4s ease;
  border-radius: 30px;
}

.work-item:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.work-caption {
  position: absolute;
  bottom: 10px;
  left: 15px;
  font-size: 1em;
  background: rgba(255,255,255,0.8);
  padding: 5px 10px;
  border-radius: 4px;
}

.projecten-titel {
  color: white;
  font-size: 40px;
  text-align: center;
  margin-bottom: 40px;
  font-family: 'chunkyfunks', fantasy;
   transition: text-shadow 0.3s ease, color 0.3s ease;
}

.projecten-titel:hover{
    color: rgb(191, 73, 255);
}

.projecten-titel.active {
  color: rgb(191, 73, 255);
}

#project {
  display: none;
}



#projecten{
    font-family: fantasy;
    margin-left: 20px;
}




/* Kleuren voor de drie blokken */
.env { 
    background-color: #d0e2b8;
    background-image: url(img/1051_05230142_C003.00_00_46_21.Still013.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.env:hover{
     background-color: #d0e2b8;
    background-image: url(img/Schermafbeelding\ 2025-10-09\ 151524.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
}

.candid { 
    background-color: #c6c3be;
    background-image: url(img/blikjevoorkantheel.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.candid:hover{
    filter: grayscale(0%);
}

.editorial { 
    background-color: #f3d5c0; 
    background-color: #c6c3be;
    background-image: url(img/handennormaal.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.editorial:hover{
     background-color: #f3d5c0; 
    background-color: #c6c3be;
    background-image: url(img/handenbloed.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.extra1 {
  background-color: #e0d4f7;
  background-image: url(img/jurk2.png);
  background-repeat: no-repeat;
    background-size: cover;
    background-position: center -50px;
}

.extra1:hover{
    background-image: url(img/jurk3.png);
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center -40px;
}

.extra2 {
  background-color: #d4f7e0;
     background-image: url(img/oog\ blauw.jpg);
      background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.extra2:hover{
    background-image: url(img/oog\ lens.png);
      background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.extra3 {
  background-color: #d4f7e0;
     background-image: url(img/spiegel\ normaal.png);
      background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.extra3:hover{
    background-image: url(img/spiegel\ qr.png);
      background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




/* Projectsectie */
.project {
  padding: 60px;
  text-align: center;
  animation: fadeIn 0.6s ease forwards;
}


.project h2 {
  font-size: 3em;
  margin-bottom: 20px;
}

.project p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1em;
  line-height: 1.6;
}

.back {
  display: inline-block;
  margin-top: 40px;
  text-decoration: none;
  color: #111;
  border: 1px solid #111;
  padding: 10px 20px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.back:hover {
  background-color: #111;
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsief gedrag */
@media (max-width: 800px) {
  .hero-split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .hero-about {
    padding: 40px 20px;
  }
}

#paranoidetitel{
    font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
     animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


#paranoidestill{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#klok{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#roltrap{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#trap{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#shortfilm{
    padding-right: 460px;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#shortfilmtekst{
    text-align: left;
}

#opdracht{
    padding-right: 442px;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#opdrachttekst{
    text-align: left;
}

#visueelonderzoek{
    padding-right: 362px;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#visueelonderzoektekst{
    text-align: left;
    margin-bottom: 40px;
}

#locatie{
    padding-right: 505px;
    margin-top: 40px;
    font-size: 20px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#locatietekst{
    text-align: left;
}

#uitvoering{
    padding-right: 463px;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#uitvoeringtekst1{
    text-align: left;
}

#uitvoeringtekst2{
    text-align: left;
    margin-top: 25px;
    margin-bottom: 40px;
}

#achteren{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#auto{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#knie{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#vuist{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#lipbite{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#titel{
   font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    margin-right: -30px;
    animation: slideInLeft 1s ease-out forwards;
}

#koptekst{
    text-align: center;
    font-size: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#merkidentiteittekst{
    text-align: left;
}

#merkidentiteittekst2{
    margin-top: 25px;
    text-align: left;
}

#blikjekoptekst{
    font-size: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 80px;
}

#blikjevoorkant{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#blikjeachterkant{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
    height: 547px;
}

#flyerkoptekst{
    font-size: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 80px;
}

#flyer{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 800px;
    border-radius: 20px;
}

#flyervoorkant{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#flyerachterkant{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#instakoptekst{
    font-size: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 80px;
}

#proceskoptekst{
    font-size: 20px;
    padding-right: 506px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#procestekst{
    text-align: left;
    margin-bottom: 40px;
}

#flyerproces{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 800px;
    border-radius: 20px;
}

#flyervoorkantproces{
      background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#flyerachterkantproces{
      background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#instastoryvideoproces{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#marilynmonroetitel{
    font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    animation: slideInLeft 1s ease-out forwards;
}

#koptekstmarilyn{
     text-align: center;
    font-size: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#deopdrachtmarilyn{
    font-size: 20px;
    padding-right: 440px;
    margin-top: 80px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#opdrachttekst{
    text-align: left;
    margin-bottom: 40px;
}

#ontwerpkeuzeskoptekst{
    font-size: 20px;
    padding-right: 396px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#ontwerpkeuzestekst{
    text-align: left;
    margin-bottom: 40px;
}

#naamtekst{
    text-align: left;
    margin-top: 40px;
    margin-bottom: 40px;
}

#slingervormtekst{
    text-align: left;
    margin-top: 40px;
    margin-bottom: 40px;
}

#expo{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 800px;
    border-radius: 20px;
}

#wittejurk1{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#wittejurk2{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#loremipsum{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#expomuur{
       background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 1000px;
    border-radius: 20px;
}

.clickable-img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.clickable-img:hover {
  transform: scale(1.02);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.lightbox-content {
  display: block;
  margin: 5% auto;
  max-width: 80%;
  max-height: 80%;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.close {
  position: absolute;
  top: 30px;
  right: 50px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

#echoestitel{
    font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    animation: slideInLeft 1s ease-out forwards;
}

#echoesopdrachttitel{
    font-size: 20px;
    padding-right: 440px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#echoesopdrachttekst{
    text-align: left;
    margin-bottom: 40px;
}

#echoesuitvoeringtitel{
    font-size: 20px;
    padding-right: 460px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#echoesuitvoeringtekst{
     text-align: left;
    margin-bottom: 40px;
}

#wekkernormaal{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    height: 227px;
    border-radius: 20px;
}

#wekkerbloed{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#handennormaal{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#handenbloed{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#climax{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
    height: 233px;
}

#einde{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

.caption-box {
  position: absolute;
  bottom: -1px; /* schuift het vakje deels onder de afbeelding */
  left: 20px;
 background-color: rgba(0, 0, 0, 0.3);
  color: #aaa; /* subtiel grijs als default */
  font-family: 'chunkyfunks', fantasy;
  font-size: 1.4em;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 2;
  transition: transform 0.3s ease, background 0.3s ease;
}

.work-item:hover .caption-box {
  color: rgb(191, 73, 255);
  background-color: rgba(0, 0, 0, 0.6);
   letter-spacing: 1px;
  transform: translateY(-5px);
}

#paranoide{
    font-family: "chunkyfunks", fantasy;
}

#funkyfizzz{
    font-family: "chunkyfunks", fantasy;
}

#echoesofthefuture{
    font-family: "chunkyfunks", fantasy;
}

#marilynmonroe{
    font-family: "chunkyfunks", fantasy;
}

#sfxmakeup{
    font-family: "chunkyfunks", fantasy;
}

#ARtheater{
    font-family: "chunkyfunks", fantasy;
}


#sfxtitel{
    font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    animation: slideInLeft 1s ease-out forwards;
}

#newprojecttitel{
    font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}


#sfxopdrachtkoptekst{
     font-size: 20px;
    padding-right: 440px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#sfxopdrachttekst{
    text-align: left;
    margin-bottom: 40px;
}

#wndowstothesoul{
     font-size: 20px;
    padding-right: 335px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#windowstothesoultekst{
    text-align: left;
    margin-bottom: 40px;
}

#uitvoeringmooiekantkoptekst{
     font-size: 20px;
    padding-right: 292px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#uitvoeringmooiekanttekst{
    text-align: left;
    margin-bottom: 40px;
}

#mooiekant{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#uitvoeringlelijkekantkoptekst{
     font-size: 20px;
    padding-right: 270px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#uitvoeringlelijkekanttekst{
    text-align: left;
    margin-bottom: 40px;
}

#liquidlatex{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#lelijkekant{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#eindwerk{
     font-size: 20px;
    padding-right: 475px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#samengevoegdtekst{
     text-align: left;
    margin-bottom: 40px;
}

#eindwerksfx{
       background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

.sensitive-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.sensitive-wrapper img {
  display: block;
  filter: blur(8px);
  transition: filter 0.3s ease;
}

.sensitive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.sensitive-wrapper.revealed img {
  filter: none;
}

.sensitive-wrapper.revealed .sensitive-overlay {
  opacity: 0;
  pointer-events: none;
}

#materialenkoptekst{
       font-size: 20px;
    padding-right: 450px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#dikbloed{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#vloeibaarbloed{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#wax{
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#oogschaduw{
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#anderewerkenkoptekst{
      font-size: 20px;
    padding-right: 400px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#joker4{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#joker1{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#makeup1{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#makeup3{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#ARtheatertitel{
      font-size: 80px;
    margin-bottom: 50px;
    margin-top: -10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
    animation: slideInLeft 1s ease-out forwards;
}

#theateropdrachtkoptekst{
     font-size: 20px;
    padding-right: 440px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#theateropdrachttekst{
    text-align: left;
    margin-bottom: 40px;
}

#ideekoptekst{
    font-size: 20px;
    padding-right: 495px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#ideetekst{
    text-align: left;
    margin-bottom: 40px;
}

#beyondsensekoptekst{
     font-size: 20px;
    padding-right: 435px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#beyondsensetekst1{
    text-align: left;
    margin-bottom:20px;
}

#beyondsensetekst2{
     text-align: left;
    margin-bottom: 40px;
}

#ARfilterhoofdzaal{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 600px;
    border-radius: 20px;
}

#theaterneutraal{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#theaterfilter{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#stoelenneutraal{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#stoelenfilter{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#ingangneutraal{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#ingangfilter{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

#voorbeeldenkoptekst{
     font-size: 20px;
    padding-right: 136px;
    margin-top: 40px;
    margin-bottom: 30px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#beyondsensevideokoptekst{
     font-size: 20px;
    padding-right: 435px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#garderobefilter{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    border-radius: 20px;
}

.skills-section {
  background-color: black;
  border-radius: 30px;
  margin: 100px auto;
  padding: 20px 30px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
}

.skill-box {
  flex: 1 1 250px;
  max-width: 340px;
  text-align: center;
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
   width: 100%;              /* laat hem de kolombreedte vullen */
    min-height: 300px;        /* voorkomt dat ze te klein worden */
  max-height: 280px;        /* voorkomt dat ze te lang worden */
  overflow: hidden;  
  
}

.skill-box h4 {
  color: black;
  font-family: "chunkyfunks", fantasy;
  font-size: 24px;
  transition: color 0.3s ease;
}

.skill-box:hover h4 {
  color: rgb(191, 73, 255); /* ✅ paars bij hover */
}


.skill-box:hover {
  transform: translateY(-5px);
}

.skill-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: rgb(191, 73, 255);
   filter: grayscale(100%); /* ✅ emoji wordt zwart-wit */
  transition: filter 0.3s ease;
}

.skill-box:hover .skill-icon {
  filter: none; /* ✅ kleur komt terug bij hover */
}

.skill-box h4 {
  font-family: "chunkyfunks", fantasy;
  font-size: 22px;
  margin-bottom: 10px;
}

.skill-box p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.skills-titel {
  color: white;
  font-size: 40px;
  text-align: center;
  margin-bottom: 40px;
  font-family: 'chunkyfunks', fantasy;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.skills-titel:hover {
  color: rgb(191, 73, 255);
}

.skill-box-large {
  grid-row: span 2; /* laat deze box twee rijen hoog zijn */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 800px;
}


.skills-row {
  display: grid;
 grid-template-columns: repeat(3, minmax(280px, 1fr)); /* bredere kolommen */
  grid-template-rows: repeat(2, auto);
  grid-auto-rows: 1fr; /* ✅ zorgt voor gelijke hoogte */
  gap: 40px;
   margin: 0 auto; /* ✅ centreert de grid */
   padding-right: 20px;
}


.skill-box-full {
  width: 100%;
  max-width: 700px; /* of wat past bij jouw layout */
  margin: 40px auto 0;
  padding: 30px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.contact-section {
  background-color: black;
  color: white;
  padding: 60px 30px;
  text-align: center;
  border-radius: 30px 30px 0 0;
  margin-top: 100px;
  margin-left: 20px;
  margin-right: 20px;
}

.contact-section h3 {
  font-size: 36px;
  font-family: 'chunkyfunks', fantasy;
  margin-bottom: 20px;
}

.contact-section p {
  font-size: 16px;
  font-family: Verdana, sans-serif;
  margin-bottom: 30px;
}

.contact-links a {
  display: inline-block;
  margin: 10px 15px;
  font-size: 20px;
   color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-links a:hover {
  color: rgb(191, 73, 255);
}

.contact-title {
  color: white;
  font-family: "chunkyfunks", fantasy;
  font-size: 36px;
  transition: text-shadow 0.3s ease, color 0.3s ease;
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     4px 12px rgba(60, 58, 61, 0.584);
}

.contact-title:hover {
  color: rgb(191, 73, 255); /* ✅ paarse tekstkleur */
  text-shadow: none;
  transition: color 0.3s ease;
}

.contact-title.active {
  color: rgb(191, 73, 255); /* ✅ paarse tekstkleur */
  text-shadow: none; /* ✅ geen extra schaduw */
}


.woonplaats {
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}

.opleiding-blok {
  position: relative;
  background-color: white;
  color: black;
  padding: 30px 20px;
  border-radius: 20px;
  font-size: 1em;
  line-height: 1.6;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid black;
  margin-top: 80px;
  max-width: 600px;
}


.opleiding-titel h3 {
  font-family: "chunkyfunks", fantasy;
  font-size: 30px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute; /* ← belangrijk voor overlap */
  top: -45px;          /* ← bepaalt hoe ver hij over het blok valt */
  left: 60px;          /* ← uitlijning zoals About Me */
  z-index: 3;
  margin-top: 70px;
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     4px 12px rgba(60, 58, 61, 0.584);
}

.opleiding-titel {
  position: relative;
  z-index: 3;
  margin-bottom: -40px; /* schuift de titel over het blok */
  margin-top: 60px;
  padding-left: 60px; /* uitlijning zoals About Me */
}

.opleiding-title {
  color: white;
  font-family: "chunkyfunks", fantasy;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  top: -45px;
  left: 60px;
  z-index: 3;
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     4px 20px rgba(60, 58, 61, 0.584);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.opleiding-title:hover {
  color: white;
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     4px 12px rgb(191, 73, 255);
}


.opleiding-title.active {
  color: white; /* ✅ blijft wit */
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     4px 12px rgb(191, 73, 255); /* ✅ alleen de schaduw paars */
}

.skills-titel {
  color: white;
  font-family: "chunkyfunks", fantasy;
  font-size: 40px;
  text-align: center;
  margin-bottom: 40px;
  transition: color 0.3s ease;
}

.skills-titel:hover {
  color: rgb(191, 73, 255);
}

.skills-titel.active {
  color: rgb(191, 73, 255);
}



@keyframes flashShadow {
  0% {
    text-shadow:
      -2px -2px 0 black,
       2px -2px 0 black,
      -2px  2px 0 black,
       2px  2px 0 black,
       4px 12px rgb(191, 73, 255);
  }
  100% {
    text-shadow:
      -2px -2px 0 black,
       2px -2px 0 black,
      -2px  2px 0 black,
       2px  2px 0 black,
       4px 12px rgba(60, 58, 61, 0.584);
  }
}

.flash-shadow {
  animation: flashShadow 4s ease-out;
}

@keyframes flashColor {
  0% {
    color: rgb(191, 73, 255);
  }
  100% {
    color: white;
  }
}

.flash-color {
  animation: flashColor 4s ease-out;
}

#onderzoek{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 600px;
    border-radius: 20px;
}

#procestekst2{
   text-align: left;
    margin-bottom: 40px;
    margin-top: 40px;
}

#dia{
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 600px;
    border-radius: 20px;
}

#uitwerkingspiegeltekst{
    text-align: left;
    margin-bottom: 40px;

}

#uitwerkingspiegeltekst2{
   text-align: left;
    margin-bottom: 40px;
    margin-top: 40px;
}

#spiegelslachtoffer{
      background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 800px;
    border-radius: 20px;
}

#filtervideo{
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 400px;
    height: 400px;
    border-radius: 20px;
}

#filter{
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 600px;
    border-radius: 20px;
}

#uitlegspiegel{
    font-size: 20px;
    padding-right: 517px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#uitlegspiegeltekst{
  text-align: left;
    margin-bottom: 40px;
}

#aanpassingen{
    font-size: 20px;
    padding-right: 423px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#aanpassingentekst{
   text-align: left;
    margin-bottom: 40px;
}

#spiegelpleger{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 800px;
    border-radius: 20px;
}

#uitwerkingspiegelkoptekst{
  font-size: 20px;
    padding-right: 453px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#processpiegelkoptekst{
   font-size: 20px;
    padding-right: 508px;
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: "chunkyfunks", fantasy;
    font-weight: 400;
    letter-spacing: 2px;
}

#opdrachtspiegeltekst2{
    text-align: left;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
  body {
    padding: 0 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-x: hidden;
  }

  header, .nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  nav ul {
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  h1, h2, h3, h4 {
    font-size: 1.4rem;
    text-align: center;
    word-break: break-word;
  }

  .hero-name {
    font-size: 2.2rem;
    line-height: 1.1;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .intro-text {
    padding: 20px;
    font-size: 0.95rem;
    text-align: center;
  }

  .section {
    padding: 20px 0;
  }

  .skill-box, .skill-box-full {
    max-width: 100%;
    padding: 20px;
    font-size: 0.95rem;
    text-align: center;
  }

  .skill-box-full-wrapper {
    padding: 0 10px;
  }

  img, .icon {
    max-width: 100%;
    height: auto;
  }

      .work-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px;
  }

  .work-item {
    width: 100%;
    max-width: 340px; /* zelfde breedte als skillboxes */
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
  }

  .caption-box {
    font-size: 0.95rem;
    color: #fff;
    margin-top: 12px;
  }

   
}