/* Home page background */
.home-page {
  background-color: var(--first-color);
}

.home-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 800px;
  background-image: var(--home-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  z-index: -1;
}

.home-page::after {
  content: "";
  position: absolute;
  top: 600px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--first-color));
  z-index: -1;
}

@media (max-width: 768px) {
  .home-page::before {
    height: 500px;
    background-image: var(--home-bg-mobile);
  }
}

/* Games page background */
.games-page {
  background: var(--games-bg) center center / cover no-repeat fixed;
}

.games-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--first-color-opacity);
  z-index: -1;
}

/* Content pages (privacy, terms, etc) */
.content-page {
  background: url("/images/background-other.webp") repeat center center;
}

/* Default page background */
.default-page {
  background: url("/images/background-other.webp") no-repeat center center;
}