/* Verwijder standaard margins en zorg dat de body de volledige grootte inneemt */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  color: white;
  overflow: hidden; /* Geen scrollbalken */
}

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67.5vh;
  overflow: hidden;
  z-index: 1;
}

#player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* Gebaseerd op 16:9 aspect ratio */
  min-height: 100vh;
  min-width: 177.77vh; /* Gebaseerd op 16:9 aspect ratio */
  pointer-events: none;
}

/* Overlay (optioneel, als je een donkere laag over de video wilt) */
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Donkere transparante laag */
  pointer-events: none; /* Geen interactie mogelijk */
}

/* Zorg dat de banner precies onder de video blijft */
nav img {
  position: fixed;
  top: 8.2vh; /* Vaste positie vanaf bovenkant */
  left: 0;
  width: 100%;
  height: 67.5vh;
  object-fit: cover;
  z-index: 2;
}

/* Large Desktop Screens (1920px and up) */
@media screen and (min-width: 1920px) {
  nav img {
    height: 70vh;
    top: 7vh;
  }
}

/* Standard Desktop Screens (1366px to 1919px) */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
  nav img {
    height: 67.5vh;
    top: 8.2vh;
  }
}

/* Laptops and Small Desktops (1024px to 1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  nav img {
    height: 65vh;
    top: 10vh;
  }
}

/* Tablets in Landscape (768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  nav img {
    height: 60vh;
    top: 12vh;
  }
}

/* Tablets in Portrait and Large Phones (481px to 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  nav img {
    height: 55vh;
    top: 15vh;
    width: 100vw; /* Full width for smaller screens */
    object-fit: cover;
  }
}

/* Mobile Phones (480px and below) */
@media screen and (max-width: 480px) {
  nav img {
    height: 50vh;
    top: 17vh;
    width: 100vw;
    object-fit: cover;
  }
}

/* Height-based media queries */
/* Short screens */
@media screen and (max-height: 600px) {
  nav img {
    height: 80vh;
    top: 5vh;
  }
}

/* Very tall screens */
@media screen and (min-height: 1200px) {
  nav img {
    height: 65vh;
    top: 10vh;
  }
}

/* Device orientation */
@media screen and (orientation: landscape) and (max-height: 500px) {
  nav img {
    height: 90vh;
    top: 3vh;
  }
}

/* Retina and high DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi) {
  nav img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Support for ultrawide monitors */
@media screen and (min-aspect-ratio: 21/9) {
  #player {
    width: 120vw;
    height: 67.5vw;
  }
}

/* iPad Pro specific */
@media screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  nav img {
    height: 58vh;
    top: 13vh;
  }
}

/* iPhone X and newer */
@supports (padding: max(0px)) {
  nav img {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}