/* Meijer Holland 3D: the frame around the simulator. */

.mh3d {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 28px;
  aspect-ratio: var(--mh3d-ratio, 16 / 10);
  /* Never taller than the screen, so the bar with the fullscreen button stays in view. */
  max-height: calc(100vh - 40px);
  border: 1px solid #dcdcdc;
  /* Same colour as the simulator's loading screen, so nothing flashes. */
  background: var(--mh3d-bg, #f2f2f2);
}

.mh3d__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .mh3d {
    aspect-ratio: var(--mh3d-ratio-mobile, 3 / 4);
  }
}

/* Only shown to logged-in editors while the game is missing or still being uploaded. */
.mh3d-missing {
  padding: 10px 14px;
  border-left: 4px solid #f1b432;
  background: #fff8e6;
}