html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #050507;
}

#custom-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #050507;
  background-image: url("alraya_splash_screen.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#custom-splash.hide {
  opacity: 0;
  pointer-events: none;
}

@media (min-aspect-ratio: 3/4) {
  #custom-splash {
    background-size: contain;
  }
}