* {
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: .75em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body {
  touch-action: manipulation; /* voorkomt double click on mobile */
}

body {
  user-select: none; /* voorkomt selecteren van tekst op de pagina */
}

h1, h2, a, p, span {
  font-family: "Inter", serif;
  text-transform: uppercase;
  color: black;
  font-size: 14px;
  letter-spacing: 4%;
  font-weight: 500;
  text-decoration: none;
}

img {
  pointer-events: none;
}

a:hover {
  background-color: black;
  color: white;
}

/* splash screen */
.splash-screen {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  animation: appear 4.3s ease-in-out forwards;

}

.top, .bottom {
  width: 100vw;
  height: 100vh;
  left: 0;
}

.top {
  background-color: white;
  z-index: 1; /* Lager dan .bottom */
  animation: slideUpTop 4.3s ease-in-out forwards;
}

.bottom {
  background: black;
  top: 100%; /* Start onder de top div */
  z-index: 2; /* Hoger dan .top zodat het er overheen schuift */
  animation: slideUpBottom 4.3s ease-in-out forwards;
}

h2 { 
  position: absolute;
  z-index: 50;
  mix-blend-mode: difference;
  color: white;
  width: 100vw;
  height: 100vh;
  top: calc((100vh / 2 ) - 14px);
  text-align: center;
  animation: slideUpTop 4.3s ease-in-out forwards;
}

/* Keyframes voor de animatie */
@keyframes slideUpBottom {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-100%); /* Schuift omhoog over de top div */
    }
    60% {
      transform: translateY(-100%); /* Schuift omhoog over de top div */
    }
    100% {
     transform: translateY(-200%); /* Schuift omhoog over de top div */
    }
}

@keyframes slideUpTop
 {
    40% {
        transform: translateY(0%); /* Schuift omhoog over de top div */
    }
    60% {
      transform: translateY(0%); /* Schuift omhoog over de top div */
    } 
    100% {
     transform: translateY(-100%); /* Schuift omhoog over de top div */
    }
}

@keyframes appear
 {
    0% {
    }
  100% {
    display: none;
  }
}





h1 {
  float: left;
  margin: 0;
}

nav {
  float: right;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

footer a {
  display: none;
}

footer p {
  margin: 0;
}

footer button {
  text-transform: uppercase;
}

footer button {
  display: flex;
  align-items: center;

  border: 0;
  background: transparent;
  box-sizing: border-box;
  height: 9.25px;

  border-color: transparent transparent transparent #202020;
  cursor: pointer;

  border-style: double;
  border-width: 0px 0 0px 7.5px;

  &.paused {
    border-style: solid;
    border-width: 4.625px 0 4.625px 10px;
  }

  span {
    font-size: 14px;
  }
}


@media (min-width: 768px) {
  footer a {
    display: inline;
  }

  footer p {
    display: none;
  }
}

.custom-cursor {
  display: none;
}

@media (min-width: 768px) {
  body {
    cursor: none;
  }

  .custom-cursor {
    position: fixed;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    padding: 5px 10px;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.2s;
  }

  .custom-cursor.left::before {
    content: "← ";
  }

  .custom-cursor.right::after {
    content: " →";
  }
}

.gallery {
  display: flex;
  align-items: center;
  overflow: auto;
  scrollbar-width: none;
  padding: .75em 0;
  scroll-snap-type: x mandatory;
  height: 100%;
  max-height: 1000px;
  /* scroll-behavior: smooth; Niet nodig voor scroll-snap, maar handig voor JS straks */
}

.gallery .slide {
  flex: calc(100vw - 1.5em) 1 0; 
  height: 100%;
  scroll-snap-align: center;
}

.gallery .slide:has(picture + picture) {
  display: flex;
  justify-content: center;
  align-items: center;
  }

.gallery .slide:has(picture + picture) picture {
  height: calc(100%);
  max-width: calc(100% / 2 - 12px); 
  width: auto;
}

.gallery .slide:has(picture + picture) picture:first-of-type {
  margin-right: 12px;
  margin-bottom: 0px;
}

.gallery .slide {
  justify-content: center;
}

.gallery .slide picture img, .gallery .slide picture source {
  height: 100%;
  width: 100%;
  object-fit: contain;
}