.TitleScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Matches the canvas width */
  height: 100%; /* Matches the canvas height */
  background-color: black;
  background-image: url(../Images/logo.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  
}

.TitleScreen .KeyboardMenu {
  position: absolute;
  width: 100px;
  left: 50%; /* Center horizontally */
  bottom: 2%; /* Place it near the bottom */
  transform: translateX(-50%) scale(1); /* Fully center the container */
  display: flex;
  
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
}

.TitleScreen button {
  background: transparent;
  color: #fff;
  justify-content: center;
  padding: 0;
}
.TitleScreen button:focus {
  background: rgb(170,170,170);
}
.TitleScreen .DescriptionBox {
  background: transparent;
  color: #fff;
  border: 0;
  text-align: center;
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(1); /* Scale factor calculation */
}
.TitleScreen .KeyboardMenu {
  position: absolute;
  width: 100px;
  left: 50%; /* Center horizontally */
  bottom: 5%; /* Place it near the bottom */
  transform-origin: center bottom;
  transform: translateX(-50%) scale(1); /* Default scale */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
}

/* Scale down for smaller screens */
@media (max-width: 300px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(0.3);
    bottom: -2%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(0.3); /* Target scale */
  }
}

@media (max-width: 480px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(0.6);
     bottom: 0%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(0.6); /* Target scale */
  }
}

@media (min-width: 481px) and (max-width: 600px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(0.8);
     bottom: 0%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(0.9); /* Target scale */
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(1.3);
    bottom: 0%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(1.2); /* Target scale */
  }
}

/* Ideal scale at 1061px */
@media (min-width: 901px) and (max-width: 1061px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(1.6);
    bottom: 2%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(1.4); /* Target scale */
  }
}

/* Scale up for larger screens */
@media (min-width: 1062px) and (max-width: 1440px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(1.8);
    bottom: 3%;
  }

.TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(1.6); /* Target scale */
  }
}

@media (min-width: 1441px) {
  .TitleScreen .KeyboardMenu {
    transform: translateX(-50%) scale(2);
    bottom: 5%;
  }
  .TitleScreen .DescriptionBox {
    transform: translateX(-50%) scale(1.8); /* Target scale */
  }

}