/* General Body Styles */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  overflow: hidden; /* Prevents scrollbars from the background */
}

/* Main Container for the background and content */
.landing-container {
  height: 100vh;
  width: 100vw;
  background: url("./assets/bg-image.png") no-repeat center center/cover; /* Background image */
  display: flex;
  align-items: center;
  position: relative;
}

/* Wrapper to group the content */
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px; /* Space between items */
  width: 100%;
  /* max-width: 450px;  */
  max-width: 35%;
  transform: translateX(6vw);
}

/* Game logo image */
.logo-image {
  width: 100%;
  max-width: 550px;
  height: auto;
}

/* Container for the buttons */
.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.button-group a {
  max-height: 40%;
  width: 100%;
  height: 100%;
  padding: 0px;
}
.button-group img {
  width: 90%;
  height: 90%;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 650px) {
  .landing-container {
    height: 100vh;
    width: 100vw;
    background: url("./assets/bg-mobile.png") no-repeat center center/cover; /* Background image */
    display: flex;
    justify-content: start;
    align-items: start;
  }

  .content-wrapper {
    gap: 20px;
    padding: 15px;
    transform: translateX(0);
    height: 60%;
    margin: 0 auto;
    max-width: 100%;
    justify-content: space-between;
  }

  .logo-image {
    max-width: 32vh;
    transform: translateY(0.4vh);
  }
  .button-group {
    transform: translateY(-4vh);
    width: 80%;
    align-items: center;
    justify-content: center;
  }
}