/* ALL GAMES PAGE */
#game-top-container {
  background-color: #d1b798;
}

#game-container {
  background-color: #f8ebdd;
  position: relative;
  text-align: center;
  min-height: 100%;
}

.button {
  width: 100%;
  padding-top: 79.37%; /* aspect ratio of 504px x 400px = 400/504 = 0.7937 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
}

.koi-kitty-button,
.bookwyrm-button {
  border-radius: 15px; /* make sure rounded corners stay with all inheritors */
}

.koi-kitty-button {
  background-image: url(../media/koi_kitty_bg2.png);
}

.bookwyrm-button {
  background-image: url(../media/bookwyrm_bg2.png);
}

/* Text styling inside the button */
.button .centered {
  position: absolute;
  top: 50%; /* centering */
  left: 50%; /* centering */
  transform: translate(
    -50%,
    -50%
  ); /* move element by 50% of its own size to get perfect centering */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.button:hover .centered {
  opacity: 1;
}

/* Hover effect */
.button:hover {
  background-color: black;
  opacity: 0.7;
}

/* add responsive css for mobile */
@media (max-width: 768px) {
  #game-container {
    margin-bottom: 30px;
  }

  /* game page buttons */
  .button {
    margin-bottom: 15px;
  }
}

/* INDIVIDUAL GAME PAGE */
#game-info-body {
  background-color: #f8ebdd;
}

#game-info-container {
  background-color: #f8ebdd;
  min-height: 100%;
}

.game-info-download {
  background-color: #fdd366 !important;
  border-radius: 50px !important;
}

.back-arrow {
  color: #d1b798;
}