* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #000123;
 background-image: url("back2.webp");
  background-repeat: repeat;
  background-size: 600px;
  background-position: center top;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.poster {
  position: relative;
  width: min(100vw, 540px);
  line-height: 0;
  overflow: hidden;
  background: #181457;
}

.poster-bg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.tap,
.thumb {
  position: absolute;
  display: block;
  z-index: 3;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
}

.tap {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
}

.tap:active,
.thumb:active {
  transform: scale(0.985);
}

/* Coordinates are percentages of the 946 × 1662 background image. */

/* Follow */
.instagram { left: 5.6%;  top: 48.0%; width: 25.5%; height: 14.2%; }
.tiktok    { left: 29.5%; top: 41.8%; width: 40.0%; height: 22.3%; }
.youtube   { left: 68.7%; top: 48.0%; width: 26.2%; height: 14.2%; }

/* Listen */
.spotify { left: 4.8%;  top: 67.5%; width: 30.0%; height: 8.4%; }
.apple   { left: 34.7%; top: 67.6%; width: 31.0%; height: 8.4%; }
.ytmusic { left: 64.3%; top: 67.5%; width: 31.4%; height: 8.4%; }

/* YouTube thumbnails, 16:9, placed inside the empty areas above the labels */
.thumb {
  z-index: 2;
  overflow: hidden;
  background: #070713;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(255, 230, 80, 0.25);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* These are intentionally smaller than the full frames, so the built-in text labels remain visible. */
.thumb-biertje    { left: 7.2%;  top: 82.0%; width: 40.0%; aspect-ratio: 16/8.5; }
.thumb-koningsdag { left: 52.2%; top: 82.0%; width: 40.0%; aspect-ratio: 16/8.5; }

/* Full video-card tap zones so tapping the label also opens the clip. */
.video-left  { left: 3.2%;  top: 79.7%; width: 45.0%; height: 16.7%; }
.video-right { left: 51.0%; top: 79.7%; width: 46.0%; height: 16.7%; }


}

/* Optional: uncomment this while adjusting coordinates.
.tap { outline: 2px solid rgba(0,255,255,.55); background: rgba(0,255,255,.08); }
.thumb { outline: 2px solid rgba(255,255,0,.7); }
*/