:root {
  --MENU-BG-OUTER-COLOR: rgba(159, 84, 189, 0.295);
  --MENU-BG-INNER-COLOR: rgba(250, 250, 250, 0.411);
  --BTN-COLOR: #e97187;
  --menu-size: 500px;
  --BTN-BACK: white;
}

.game-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vh 1vw;
  gap: clamp(5px, 5vh, 1.5rem);
  width: clamp(300px, 70vw, var(--menu-size));
  max-height: fit-content;
  background: linear-gradient(
    160deg,
    var(--MENU-BG-OUTER-COLOR),
    10%,
    var(--MENU-BG-INNER-COLOR),
    80%,
    var(--MENU-BG-OUTER-COLOR)
  );
  border: 3px solid var(--MENU-BORDER-COLOR);
  border-radius: var(--menu-border-radius);
}

.game-menu * {
  text-transform: uppercase;
}

.slide-animation {
  animation: slideDown 1.5s ease-out forwards;
}

.game-menu__h2 {
  font-family: "Ribeye Marrow", serif;
  font-family: "Delius", cursive;
  font-size: clamp(1.2rem, 8vh, 32px);
  text-shadow: 1px 0px 1px var(--SHADOW-COLOR);
}

.menu-options {
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: clamp(1px, 0.5vh, 5px);
  font-family: "Delius", cursive;
}

.menu-options .menu-btn {
  width: 100%;
  height: clamp(1.2rem, 15vh, 80px);
  font-size: clamp(1rem, 7vh, 1.4rem);
  color: var(--TEXT-COLOR);
  text-shadow: 1px 1px 2px var(--SHADOW-COLOR);
  border: 2px solid var(--MENU-BORDER-COLOR);
}

.menu-options .menu-btn:first-of-type {
  border-top-left-radius: var(--menu-border-radius);
  border-top-right-radius: var(--menu-border-radius);
}

.menu-options .menu-btn:last-of-type {
  border-bottom-left-radius: var(--menu-border-radius);
  border-bottom-right-radius: var(--menu-border-radius);
}

.menu-btn:hover {
  filter: saturate(1.5);
  transform: scaleX(1.05);
}

.submenu-card {
  background-color: rgba(46, 46, 46, 0.11);
  padding: 1.5rem;
  border: 2px solid white;
  border-radius: 1.5rem;
  width: 80vw;
  max-width: 400px;
  display: flex;
  flex-flow: column wrap;
  gap: clamp(5px, 5vh, 50px);
  backdrop-filter: blur(10px);
  font-size: large;
  line-height: 1.5;
}

.submenu-card h2 {
  text-align: center;
  text-transform: uppercase;
}

.btn-back {
  border: none;
  border-radius: 0.4rem;
  padding: 0.5rem 2rem;
  font-family: inherit;
  font-weight: bold;
  font-size: inherit;
  color: var(--BTN-COLOR);
  text-transform: uppercase;
}

.btn-back:hover {
  --BTN-BACK: rgba(255, 255, 255, 0.856);
  --BTN-COLOR: #ff4869;
  background-color: var(--BTN-BACK);
  color: var(--BTN-COLOR);
}

#new-game {
  background-color: var(--BTN-NEWGAME);
}
#help {
  background-color: var(--BTN-HELP);
}
#options {
  background-color: var(--BTN-OPT);
}
#credits {
  background-color: var(--BTN-CRE);
}

#back {
  background-color: var(--BTN-BACK);
}

@media screen and (max-height: 700px) and (min-aspect-ratio: 7/4) {
  .game-menu {
    --menu-size: 400px;
    width: clamp(150px, 80vw, var(--menu-size));
  }
}