@media (prefers-color-scheme:light) {
  :root {
    --titlebackground: url(/img/title/title-background-light.webp);
    --titleImage: url(/img/title/title-light.webp);
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --titlebackground: url(/img/title/title-background-dark.webp);
    --titleImage: url(/img/title/title-dark.webp);
  }
}
@media (orientation:landscape) {
  :root {
    --bestserverheight: 12%;
    --bestserverright: 75%;
    --randomgameheight: 60%;
    --randomgameleft: 90%;
    --titleImageSize: 60vh;
  }
  .banner#bestserver {
    transform: translate(-100vw, 300px);
  }
  .banner#randomGame {
    transform: translate(100vw, 300px);
  }
}
@media (orientation:portrait) {
  :root {
    --bestserverheight: 80%;
    --bestserverright: 0;
    --randomgameheight: 62%;
    --randomgameleft: 0;
    --titleImageSize: 80vw;
  }
  .banner#bestserver {
    transform: translate(100vw, 500px);
  }
  .banner#randomGame {
    transform: translate(-100vw, 500px);
  }
}
#title {
  background: var(--titlebackground);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.buttons * button {
  min-width: 6em;
  width: auto;
}
#titleImage {
  position: relative;
  width: var(--titleImageSize);
  height: var(--titleImageSize);
  background: var(--titleImage);
  background-size: cover;
  color: #00000000;
}
.banner {
  position: absolute;
}
.banner#bestserver {
  top: var(--bestserverheight);
  right: var(--bestserverright);
}
.banner#randomGame {
  top: var(--randomgameheight);
  left: var(--randomgameleft);
  cursor: pointer;
}
#randomGame img {
  width: 72px;
  height: 100px;
}