@import url("https://fonts.googleapis.com/css2?family=Macondo&family=MedievalSharp&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.87);
  background-color: #000000;
  font-family: "Macondo", cursive;
}
button {
  font-family: "Macondo", cursive;
}

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Needed for fixed positioning of children */
}

.spritePosition {
  margin: 10px 0 0 10px;
  font-size: 0.8em;
}

/* UI Container Styles */
#uiContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; /* Full screen width */
  aspect-ratio: 16 / 9; /* Maintain 16/9 ratio */
  max-width: 100vw;
  max-height: 100vh;
  display: flex; /* Use flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  z-index: 10; /* Ensure UI is above the Phaser canvas */
}

#mainMenuContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#mainMenuContainer {
  background-image: url("./assets/main_menu_background.png");
  background-size: 100%;
}
#menuButtonsContainer {
  width: 100%;
  margin-top: auto;
  padding: 2vmin 6vmin;
  display: grid;
  gap: 1vmin;
  grid-template-columns: 1fr 1fr;
  background-color: #b83604;
}
#menuButtonsContainer .logoContainer {
  justify-self: end;
  display: flex;
  gap: 1vmin;
  flex-direction: column;
  font-family: "MedievalSharp", cursive;
  font-size: 3vmin;
  color: #e8c87e;
}
#menuButtonsContainer .logoContainer span:first-of-type {
  font-size: 7vmin;
  text-decoration: underline;
}

/* Make buttons inside the UI interactive */
#uiContainer .button {
  /* Use relative units for sizing and font */
  padding: 1.5vmin 6vmin; /* Example: Padding relative to the smaller viewport dimension */
  font-size: 6vmin; /* Example: Font size relative to the smaller viewport dimension */
  color: #2b201c;
  background-color: #ffbb34;
  border-radius: 4px;
  border: none;
  font-family: "MedievalSharp", cursive;
}
#uiContainer .button:hover {
  background-color: #ffaa00;
}