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

/* Main Container for the background and content */
.landing-container {
  height: 100vh;
  width: 100vw;
  background: url("./assets/background.png") no-repeat center center/cover; /* Background image */
        background-size: 100% 100%; 

  display: flex;
  align-items: center;
  position: relative;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px; 
  width: 100%;
  max-width: 35%;
  transform: translateX(6vw) translateY(-6vh);
}

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

/* Container for the buttons */
.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.button-group a {
  max-height: 50%;
  width: 100%;
  height: 100%;
}
.button-group img {
  width: 100%;
  height: 100%;
}

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

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

  .logo-image {
    max-width: 27vh;
    transform: translateY(0.4vh);
  }
  .button-group {
    transform: translateY(-4vh);
    width: 60%;
  }
}

@media (max-width:550px) {
   .button-group {
    width: 80%;
  }
}