body {
  margin: 0px;
  font-family: Verdana, sans-serif;
  background: #f8f9fa;  
}



.logo-bottom {
  position: fixed;
  opacity: 0;
  left: 50px;
  bottom: 50px;
  z-index: -1;      /* Achter andere content */
  pointer-events: none; /* Zodat je er niet op kunt klikken */
  width: 6vw;    /* Pas aan naar wens */
  animation: fade-logo 0.6s cubic-bezier(0.77, 0, 0.175, 1) .6s forwards;
}

@keyframes fade-logo {
  from {opacity: 0;}
  to {opacity: 0.2;}
}

div.under-construction {
  padding: 3vw;
}

h2 {
  font-weight: 100;
}

/*

GENERAL

*/

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/*

STATUSBAR

*/

section.linken {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding: 1% 0 1% 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


a.link {
  font-size: 2.5vw;
  text-align: center;
  flex-shrink: 1;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  color: darkslategrey;
  padding: 0 2.5vw 0 0;
}

@media (max-device-width: 1000px) {
  a.link {
    font-size: 4vw;
  }
}

a.selected {
  text-decoration-line: underline;
}

img.logo-banner {
  height: 2.5vw;
  display: block;
  position: absolute;
  left: 2.5vw;
}

/*

ANIMATIONS

*/

.fade {
  opacity: 0;
  -webkit-animation: fade-in 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
  animation: fade-in 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}

#fade-container {
  transition: opacity 0.6s;
  opacity: 1;
}

#fade-container.fade-out {
  opacity: 0;
}

#move-container.move-out {
  -webkit-animation: hide 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation: hide 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes hide {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(-100%,0);
  }
}

/*

INTRO

*/



@keyframes reveal {
  100% {
    transform: translate(0,0);
  }
}


div.center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  justify-content: center;  /* Centering y-axis */
  align-items: center; /* Centering x-axis */
}

div.row {
  display: flex;
  flex-direction: row;
  /* eventueel breedte instellen */
}

div.onder {
  width: 60%;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;

}




div.links {
  height: 20vw;
  transform: translate(50%, 0px);
  opacity: 0;
  margin: 0px;
  padding: 0px;
  border-right: 2px solid DarkSlateGray;
  -webkit-animation: links 1s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
  animation: links 1s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
  z-index: 2;
}

@keyframes links {

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}
div.logo {
  height: 100%;
  padding: 0px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;

}

img.logo {
  transform: translate(100%,0);
  object-fit: contain;
  object-position: right;
  padding: 1vw calc(2.5vw + 5px) 1vw 0;
  animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.6s forwards;
}

div.tekst {
  overflow: hidden;
  height: 100%;
  padding: 0px;
}

div.rechts {
  height: 20vw;
  margin: 0px;
  padding: 0px;
  z-index: 1;
}

img.tekst {
  transform: translate(-100%,0);
  padding-left: 2.5vw;
  height: 100%;
  animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1s forwards;
}

div.link {
  display: flex;
  flex-direction: row;
  transform: translate(0%,-100%);
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) 1.4s forwards;
  padding: 1vw;
}

/*

ABOUT

*/

section.cv-section{
  padding: 3vw;
}

.cv-photo {
  width: 200px;
  margin-bottom: 20px;
}

.cv-info {
  width: 22vw;
}

.cv-info h2 {
  margin-top: 0;
}


.cv-pdf {
  overflow-y: scroll;
}





/*

Works galerij

*/


.gallery-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 18vw;
  grid-auto-flow: dense;
  gap: 10px;
  padding: 10px;
  overflow: scroll;
}

@media (max-width: 1800px) {
  .gallery-section {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 25vw;
  }
}

@media (max-width: 1200px) {
  .gallery-section {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 33vw;
  }
}

@media only screen and (max-device-width: 1000px) {
  .gallery-section {
    grid-template-columns: 1fr;
    grid-auto-rows: 75vw;
  }
}


/* Zorg dat de a de grid tile vult */
.gallery-link {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.gallery-section figure {
  container: figure / inline-size;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  width: 100%;
  margin: 0;
}

.gallery-section img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  grid-area: 1 / 1 / -1 / -1;
  filter: grayscale(1);
  transition: transform 0.4s ease-in-out;
}

/* Vervang figure:hover door .gallery-link:hover */
.gallery-link:hover img {
  transform: scale(1.1);
  animation: tadaa 0.4s forwards;
}

figcaption {
  grid-area: 1 / 1 / -1 / -1;
  opacity: 0;
  align-self: end;
  z-index: 1;
  padding: 3em 15% 1em 1em;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.5;
  background: linear-gradient(transparent 25%, rgb(0 0 0 / 0.75));
  display: block;
  transition: opacity 0.4s ease-in-out;
}

/* Media query voor touch devices blijft werken */
@media (pointer:coarse) {
  .gallery-section img {
    filter: none;
    transition: scale 0.4s ease-in-out;
  }

  .gallery-section figcaption {
    opacity: 1;
    transition: none;
  }
}

/* Vervang figure:hover door .gallery-link:hover */
.gallery-link:hover figcaption {
  opacity: 1;
}

/* Kleine correctie: selectors voor kopjes en tekst */
figcaption h3 {
  font-size: 1.0625rem;
  margin: 0;
}

figcaption p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}


@keyframes tadaa {
  to {
    filter: grayscale(0);
    opacity: 1;
  }
}


/*

WORKS

*/



.container-works {
  height: 100%;
}

/* Flickity */

.carousel {
  background: #FAFAFA;
  height: 100%;
}

.carousel-cell {
  width: 66%;
  height: 100%;
  margin-right: 1.5vw;
  overflow: hidden;
  counter-increment: carousel-cell;
  display: flex;
  place-items: center;

}



.flickity-page-dots {
  bottom: 10px;
}

.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}

.carousel-cell figure {
  position: relative;
  display: inline-block;
  margin: 0;
}

.carousel img {
  display: block;
  width: 100%;
  /* height: 100%; */
  /* padding: 20px; */
  /* object-fit: cover; */
}

.carousel-cell figcaption {
  position: absolute;
  top: 0;           /* bovenaan */
  left: 0;
  padding: 8px;
  /* background: linear-gradient(transparent 25%, rgb(0 0 0 / 0.75)); */
  background: unset;
  opacity: 1;
  transition: none;
}

#rechtsonder {
  right: 0px; 
  bottom: 0px;
  text-align: end;
}

#rechtsboven {
  right: 0px; 
  text-align: end;
}