#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}

#splash-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/mj_loading.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* Stretch by default */
}

@media (orientation: portrait) {
  #splash-image {
    width: 100dvh;
    height: 100dvw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    background-size: 100% 100%; /* Explicitly set to stretch after rotation */
  }
}