html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  container-type: inline-size;

  font-size: 1cqw;
}

#content {
  width: 90%;
  height: 90%;
  margin: auto;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 2px black;
}

#bodyMain {
  background-color: #1a1c2c;
}

/* Regolazioni per diverse risoluzioni */
@media only screen and (max-width: 768px) {
  #mainGame {
    width: 100vw;
    height: 56.25vw;
  }

  #content {
    font-size: 1cqw;
    /* Testo leggermente più grande per schermi piccoli */
  }
}

@media only screen and (min-width: 768px) {
  #mainGame {
    width: 100vw;
    height: 56.25vw;
  }

  #content {
    font-size: 1cqw;
    /* Testo proporzionale al viewport */
  }
}

.defaultFont {
  font-family: 'Arial', sans-serif;

}

.bDefaultStyle {
  background: #313131;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

}

.defaultStyle {
  background: #313131;
  box-shadow: inset 0 0 0 0.15vw #ffffff;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

.defaultButton {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);
}

.defaultButton:hover {
  filter: saturate(3);
  /* Riduce il contrasto, quindi scurisce l'elemento */
}

.defaultButton:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0.1vw 0.1vw 0.25vw rgba(0, 0, 0, 0.5);
}

.defaultButton5 {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0vh 0.3vw rgba(0, 0, 0, 0.7);
  width: 5%;
}

.defaultButton5:hover {
  filter: saturate(3);
  /* Riduce il contrasto, quindi scurisce l'elemento */
}

.defaultButton5:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0.1vw 0.1vw 0.3vw rgba(0, 0, 0, 0.5);
}

.defaultButton15 {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 15%;
}

.defaultButton15:hover {
  filter: saturate(3);
  /* Riduce il contrasto, quindi scurisce l'elemento */
}

.defaultButton15:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0.1vw 0.1vw 0.25vw rgba(0, 0, 0, 0.5);
}

.defaultButton30 {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 30%;
}

.defaultButton30:hover {
  filter: saturate(3);
  /* Scurisce il colore del 15% */
}

.defaultButton30:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0.1vw 0.1vw 0.25vw rgba(0, 0, 0, 0.5);
}

.defaultButton100 {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 30%;
}

.defaultButton100:hover {
  filter: saturate(3);
  /* Scurisce il colore del 15% */
}

.defaultButton100:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: inset 0 0 0 0.10vw #ffffff,
    0.1vh 0.1vh 0.25vh rgba(0, 0, 0, 0.5);
}

.bDefaultButton {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow: 0vh 0.5vh rgba(0, 0, 0, 0.7);
}

.bDefaultButton:hover {
  filter: saturate(3);
  /* Riduce il contrasto, quindi scurisce l'elemento */
}

.bDefaultButton:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow: 0.1vh 0.1vh 0.25vh rgba(0, 0, 0, 0.5);
}

.defaultButtonSkin {
  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

  padding: 1.25vh;
  margin: 1vh;
}

.defaultButtonSkinStraight {
  background: #36454f;
  box-shadow: inset 0 0 0 0.15vw #ffffff;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

.bdefaultButtonSkin {
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

  padding: 1%;
  margin: 1%;
}

.defaultButtonRhombus {
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;

  box-shadow:
    0vh 0.5vh rgba(0, 0, 0, 0.7),
    0.5vh 0vh rgba(0, 0, 0, 0.7);
}

.defaultButtonRhombus:hover {
  filter: saturate(3);
  opacity: 50%;
  transform: rotate(45deg);
}

.defaultButtonRhombus:hover>* {
  filter: saturate(3);
  transform: rotate(-45deg);
}

.defaultButtonRhombus:active {
  filter: brightness(80%);
  transform: translateY(0.2vh);
  transform: translateX(0.2vh);
  transform: rotate(45deg);

  /* Ombra esterna più piccola per effetto pressione */
  box-shadow:
    0.1vh 0.1vh 0.25vh rgba(0, 0, 0, 0.5);
}

.defaultButtonRhombus:active>* {
  transform: rotate(-45deg);
}

.defaultBar {

  display: flex;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  height: 200%;

  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 4vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

.centerDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
}

.centerDivColumns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.centerDivleftText {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
}

.centerDiv2 {
  display: flex;
  position: fixed;
  flex-direction: row;
  justify-content: left;
  /* Centra orizzontalmente */
  align-items: center;
  width: 100%;
}

.divColumns {
  flex-direction: column;
}

.noClick {
  pointer-events: none;
}

/* questo mi permette di rendere il gioco ridimensionabile, credo almeno*/
button,
.redimension {
  font-size: 1.25cqw;
}

.border {
  border-radius: 1em;
  /* legato alla dimensione del font */
}

.spaceEvenly {
  display: flex;
  justify-content: space-evenly;
}


#mainMenu {
  position: relative;
  width: 100vw;
  max-width: calc(100vh * (16 / 9));

  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100vh;

  background-color: #1a1c2c;
}

#fp1 {

  position: absolute;
  height: 8%;
  max-height: 8%;
  min-height: 8%;

  overflow-y: auto;

  width: 99.48%;

  display: flex;
  flex-direction: row;


  font-size: 1.5cqw;

  margin-left: 0.5%;
  z-index: 6;

}

#fp1 * {
  pointer-events: none;
  /* children can't be clicked */
}

.line {
  height: 0.10vw;
  background: #ffffff;
  width: 100%;
}

.line2 {
  height: 100%;
  background: #ffffff;
  width: 0.1%;
}

#fp2 {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
}

#fp2_content2 {
  width: 100%;
  height: 100%;
}

#fp3 {
  position: absolute;
  top: 0%;
  height: 100%;
  width: 100%;


  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#fp3>div {
  z-index: 9;

  position: relative;
  height: 80%;
  width: 90%;
}

.defaultBarPart1 {
  width: 90%;
  position: relative;
  /* Aggiunto per posizionare gli elementi figli in modo assoluto */
  font-family: 'Arial', sans-serif;
  margin: 1vw;


  z-index: 1;
}

.defaultBarPart2 {

  position: absolute;

  width: 0%;
  /* Parte da sinistra */
  height: 100%;
  /* Stessa altezza di #fp4 */
  background-color: green;
  transition: width 0.1s ease-in-out;
  /* Animazione fluida */

  z-index: -1;

  border-radius: 4vh;
}

.defaultBarPart3 {

  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 4vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 2;
}

#fp4 {

  position: absolute;

  top: 95%;
  left: 0%;

  height: 5%;
  max-height: 5%;
  min-height: 5%;
  width: 100%;
  z-index: 4;
}

#progressInfo {
  position: absolute;
  /* Assicura che non venga spinto via */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centra perfettamente */
  font-weight: bold;
  color: white;
  text-align: center;
  white-space: nowrap;
  /* Evita che il testo vada a capo */
  z-index: 10;
  /* Garantisce che sia sopra la barra */

  height: 100%;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

#options {
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #2c2f3a;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#optionsButtons {
  position: relative;
  left: 0%;
  top: 0%;

  width: 100%;
  height: 100%;

  
}

#resetScreen {
  position: absolute;

  z-index: 10;

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

  width: 20%;
  height: 20%;

  top: 50%;
  left: 50%;

  transform: translate3d(-50%, -50%, 0);
}

#resetScreen>div {
  display: flex;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;
}

#resetScreen>div>div>div {
  display: flex;
  justify-content: space-evenly;
  /* Centra orizzontalmente */
}

#r2 {
  display: flex;
  justify-content: space-evenly;
}

.fp2Content {
  position: relative;
  border-radius: 1vw;
  box-shadow: 0 0 3vw rgba(150, 150, 150, 0.4);
}

#content2_1 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;

  background-color: #2c2f3a;
}

#content2_1_image {
  height: 50%;
  width: 100%;

  background-repeat: no-repeat;
  background-position: 57% bottom;
  background-size: 150%;

}

#content2_1_svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;

}

#bases {
  position: relative;
  top: 0%;
  width: 100%;
  height: 30%;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}

.content2_1_setBases {
  position: relative;
  width: 45%;
  height: 90%;
  background-color: #3a3f54;

  border-radius: 0.5em;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;

}

.content2_1_setBases_container {
  position: relative;
  width: 90%;
  height: 70%;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.commonBase {
  position: relative;
  display: flex;
  flex-direction: row;
  /* Centra orizzontalmente */
  justify-content: space-evenly;
  align-items: top;
  width: 48%;
  height: 90%;
  border-radius: 0.5em;
  background-color: #546288;

}

.base_int {
  display: flex;

  flex-direction: column;

  width: 90%;
  height: 40%;
  max-height: 40%;
  border-radius: 0.5em;

}

.base_int>button {
  flex-grow: 2;
}

.base_int>div {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  background-color: #546288;
}

/* Il secondo elemento prende 2 "unità" di spazio */
.base_int>div:nth-child(2) {
  flex-grow: 2;
}

#base34_req {
  display: flex;
  justify-content: center;
  align-items: center;
}


.noEvents>div {
  pointer-events: none;
}

#content2_4 {
  background-color: #2c2f3a;
  width: 100%;
  height: 100%;
}

#c2_4_fight {
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 70%;

  border-radius: 1em;
  background-color: #3a3f54;

  /* top right bottom left */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

}

#c2_4_A_container {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_4_A_image {
  width: 100%;
  height: 50%;
}

#c2_4_A {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #546288;
  border-radius: 1em;

  height: 40%;
  width: 90%;
}

#c2_4_A>div:first-child,
#c2_4_B>div:first-child {

  font-size: 1.5cqw;
}

#c2_4_A>div,
#c2_4_B>div {
  flex-basis: 33%;
  /* Imposta la base al 10% dell'altezza di frontPage */
  flex-grow: 0;
  /* Non cresce oltre la base */
}

#c2_4_VS {
  aspect-ratio: 1 / 1;
  /* sempre quadrato */
  width: 30%;
  /* prende il 30% della larghezza del contenitore */

  display: flex;
  justify-content: center;
  align-items: center;
}

#c2_4_B_container {
  width: 100%;
  height: 100%;


  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_4_B_image {
  width: 100%;
  height: 50%;
}

#c2_4_B {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #546288;
  border-radius: 1em;

  height: 40%;
  width: 90%;
}

#c2_4_win {
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  height: 20%;
  width: 90%;
  border-radius: 1em;

  background-color: #3a3f54;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_4_title {

  font-size: 1.5cqw;

  flex-basis: 50%;
  /* Imposta la base al 10% dell'altezza di frontPage */
  flex-grow: 0;
  /* Non cresce oltre la base */
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_4_rewards {
  width: 95%;

  border-radius: 1em;
  background-color: #546288;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#content2_10 {

  background-color: #2c2f3a;
  width: 100%;
  position: relative;

  overflow-y: auto;
}

#c2_10_fight {
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 70%;
  min-height: 70%;
  max-height: 70%;
  border-radius: 1em;

  background-color: #3a3f54;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

}

#c2_10_A_container {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_A_image {
  width: 100%;
  height: 50%;
}

#c2_10_A {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #546288;
  border-radius: 1em;

  height: 40%;
  width: 90%;
}

#c2_10_A>div:first-child,
#c2_10_B>div:first-child {

  font-size: 1.5cqw;
}

#c2_10_A>div,
#c2_10_B>div {
  flex-basis: 33%;
  /* Imposta la base al 10% dell'altezza di frontPage */
  flex-grow: 0;
  /* Non cresce oltre la base */
}

#c2_10_VS {
  aspect-ratio: 1 / 1;
  /* sempre quadrato */
  width: 30%;
  /* prende il 30% della larghezza del contenitore */

  display: flex;
  justify-content: center;
  align-items: center;
}

#c2_10_B_container {
  width: 100%;
  height: 100%;


  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_B_image {
  width: 100%;
  height: 50%;
}

#c2_10_B {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #546288;
  border-radius: 1em;

  height: 40%;
  width: 90%;
}

#c2_10_win {
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  height: 20%;
  min-height: 20%;
  max-height: 20%;
  width: 90%;
  border-radius: 1em;

  background-color: #3a3f54;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_title {

  font-size: 1.5cqw;

  flex-basis: 50%;
  /* Imposta la base al 10% dell'altezza di frontPage */
  flex-grow: 0;
  /* Non cresce oltre la base */
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_rewards {
  width: 95%;

  border-radius: 1em;
  background-color: #546288;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_challenges {
  position: relative;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  height: 30%;
  width: 90%;

  border-radius: 1em;
  background-color: #3a3f54;
}

#c2_10_challenges_title {

  font-size: 1.5cqw;

  width: 100%;
  height: 10%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#c2_10_challenges_title>div {

  font-size: 1.5cqw;

  width: 100%;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

#c2_10_challenges_ordinator {

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: space-evenly;
  flex-direction: row;

  height: 90%;
  width: 100%;
}

.c2_10_challenges_Style {
  width: 40%;
  height: 80%;

  border-radius: 1em;
  background-color: #546288;
}

.c2_10_challenges_Style>div {
  width: 100%;
  height: 20%;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

.c2_10_challenges_Style>button {
  height: 30%;
  width: 50%;
}

#c2_10_challengesList>button>div {
  pointer-events: none;
}

#c2_10_challengesRewards {
  justify-content: center;
}

#content2_6 {

  overflow-y: auto;
  background-color: #2c2f3a;
}

#content2_6>div {
  display: flex;
  justify-content: center;
  align-items: top;
}

#content2_6_hunts {
  position: relative;
  border-radius: 0.5em;

  height: 55%;
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: top;
  /* Porta gli elementi verso l'alto */
  align-items: top;
  /* Centra orizzontalmente */

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_hunts>div {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: top;
  /* Centra orizzontalmente */
}

#content2_6_hunt {
  height: 100%;
  width: 45%;

  display: flex;
  flex-direction: column;
  justify-content: top;
  /* Centra orizzontalmente */
  align-items: center;

  background-color: #3a3f54;
  border-radius: 1em;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_hunt>div {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;

  height: 15%;
  width: 90%;

  margin-left: auto;
  margin-right: auto;

  background-color: #546288;
  border-radius: 1em;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_hunt>div>div:not(.req) {
  position: relative;
  text-align: left;
  text-indent: 5%;
  width: 33%;

  margin-left: auto;
  margin-right: auto;
}

#content2_6_hunt>div>button {
  position: relative;
  text-align: center;
  width: 33%;
  height: 100%;

  margin-left: auto;
  margin-right: auto;
}

#content2_6_hunt>div>.req {
  position: absolute;
  text-align: center;
  width: 100%;

  margin-left: auto;
  margin-right: auto;
}

.width100 {
  width: 100%;
}

#content2_6_huntReward {
  height: 100%;
  width: 45%;

  display: flex;
  flex-direction: column;
  justify-content: top;
  /* Centra orizzontalmente */
  align-items: center;

  background-color: #3a3f54;
  border-radius: 1em;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntReward>div {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;

  height: 15%;
  width: 90%;

  margin-left: auto;
  margin-right: auto;

  background-color: #546288;
  border-radius: 1em;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntReward>div>div:not(.req) {
  position: relative;
  text-align: left;
  text-indent: 5%;
  width: 68%;

  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntReward>div>button {
  position: relative;
  text-align: center;
  width: 33%;
  height: 100%;

  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntReward>div>.req {
  position: absolute;
  text-align: center;
  width: 100%;

  margin-left: auto;
  margin-right: auto;
}

#content2_6_menu {
  display: flex;
  flex-direction: row;
  justify-content: left;
  /* Centra orizzontalmente */
  align-items: center;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntEvolution {
  position: relative;
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;

  height: 110%;
  width: 95%;

  background-color: #3a3f54;
  border-radius: 1em;
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
}

#content2_6_huntEvolution_upgrades {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: row;

  width: 100%;
  height: 100%;
}

#content2_6_huntEvolution_upgrades>div {
  width: 20%;
  height: 100%;


}

#content2_6_huntEvolution_upgrades>div>.image {
  background-color: transparent;

  background-size: 80%;
  height: 30%;


}

#content2_6_huntEvolution_upgrades>div>* {
  width: 95%;
  height: 12.5%;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  border-radius: 0.5em;
  background-color: #546288;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

@keyframes colorBlink {
  0% {
    box-shadow: inset 0 0 0 3px white;
  }

  40% {
    box-shadow: inset 0 0 0 3px red;
  }

  100% {
    box-shadow: inset 0 0 0 3px white;
  }
}

#essenceValute {
  position: absolute;
  display: flex;
  flex-direction: column;

  left: 20%;
}

#universalValute {
  position: absolute;
  display: flex;
  flex-direction: column;

  left: 35%;
}

#universalShardsValute {
  display: flex;
  flex-direction: column;
}

#content2_8 {
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  width: 100%;
  background-color: #2c2f3a;
  z-index: 10;
}

#content1_7_ascension {
  position: relative;
  /* necessario per contenere l'SVG assoluto */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;
  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background: rgb(18, 56, 68);
}

#content1_7_ascension svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#content1_7_ascension>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  padding: 1vw;
}

#content1_7_ascension_button_text {
  pointer-events: none;
}

#content1_7_ascension_milestones {
  width: 50%;
}

#content1_7_ascension_milestones>div {
  font-size: 1.5cqw;

  width: 100%;
  padding: 1vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  background: #36454f;
  box-shadow: inset 0 0 0 0.15vw #ffffff;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

  overflow-y: auto;
}

#content2_7 {
  display: flex;
  justify-content: top;
  flex-direction: column;
  background-color: #2c2f3a;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#content2_7>button {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content2_7_gridContainer {
  height: 100%;
  width: 100%;

}

#content2_7_grid {
  height: 100%;
  width: 100%;

  display: grid;


  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

#content2_7_grid>button {

  height: 95%;
  width: 95%;

  font-size: 0.85cqw;

  display: flex;

  margin-left: auto;
  margin-right: auto;

  justify-content: center;
  align-items: center;
  flex-direction: column;

}

#content2_7_grid>button>div {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

#content2_7_grid>button>div>div {
  font-size: 0.8cqw;
}

#content2_7_grid>button>div>div>div {
  font-size: 0.8cqw;
}

#content2_7_grid>button>div>div:nth-child(1) {
  height: 70%;
  width: 100%;

  display: flex;

  justify-content: center;
  align-items: center;

}

#content2_7_grid>button>div>div:nth-child(1) {

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

}

#content2_7_grid>button>div>div:nth-child(2) {
  height: 1%;
  width: 100%;
  pointer-events: none;
}

#content2_7_grid>button>div>div:nth-child(3) {
  height: 30%;
  width: 100%;

  display: flex;

  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#content2_7_grid>button>div>div:nth-child(3) {
  height: 30%;
  width: 100%;

  display: flex;

  justify-content: space-evenly;
  align-items: center;
  pointer-events: none;
}

#content2_7_grid_image {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;

  background-image: "";
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 50% 100%;
  ;
}

#content2_7_grid_svg1 {

  position: relative;

  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;
}

#content2_7_grid_svg2 {

  position: relative;

  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;
}

#content2_7_grid_svg3 {

  position: relative;

  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;
}

#content2_7_grid_svg4 {

  position: relative;

  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;
}

#content2_7_upgrade1_b1 {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;

}

#content2_7_upgrade2_b1 {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;

}

#content2_7_upgrade3_b1 {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;

}

#content2_7_upgrade4_b1 {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;

}

#content2_7_upgrade5_b1 {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade6_b1 {

  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

#content2_7_upgrade7_b1 {

  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;

}

#content2_7_upgrade8_b1 {

  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;

}

#content2_7_upgrade9_b1 {

  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;

}

#content2_7_upgrade10_b1 {

  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade11_b1 {

  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 2;

}

#content2_7_upgrade12_b1 {

  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;

}

#content2_7_upgrade13_b1 {

  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;

}

#content2_7_upgrade14_b1 {

  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;

}

#content2_7_upgrade15_b1 {

  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade16_b1 {

  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;

}

#content2_7_upgrade17_b1 {

  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;

}

#content2_7_upgrade18_b1 {

  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 4;

}

#content2_7_upgrade19_b1 {

  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 4;
  grid-row-end: 5;

}

#content2_7_upgrade20_b1 {

  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade21_b1 {

  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade22_b1 {

  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_upgrade23_b1 {

  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 5;
  grid-row-end: 6;

}

#content2_7_b1 {
  display: flex;

  flex-direction: row;

  justify-content: space-evenly;
  align-items: center;
  text-align: center;


  width: 40%;
}

#content2_7_b1>* {

  height: 100;
}

#content2_7_b1_b {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content2_9 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#content2_7_upgrades {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;

  width: 100%;
}

#content2_7_upgrades>div {
  width: 50%;
  height: 50%;
}

#content2_7_menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  width: 100%;
}

#content2_5 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#fp3_content1_4_screen_p1_inventory {
  display: flex;
  flex-direction: column;
}

#fp3_content1_4_screen_p1_grid {
  aspect-ratio: 1 / 1;
  height: 80%;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(10, 1fr);

  gap: 0.5vw;

  overflow-y: auto;

  display: grid;

  /* Bordo visibile intorno alla griglia intera */
  border: 2px solid black;
}

#fp3_content1_4_screen_p1_grid>span {
  background-color: blue;

  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  /* Bordo visibile per ogni cella */


}

#fp3_content1_4_screen_p1_grid>div {
  aspect-ratio: 1 / 1;
  height: 100%;
  /* Necessario per mantenere proporzioni dentro la colonna */

  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;
}

#fp3_content1_4_screen_p1_equipment {
  display: flex;

  flex-direction: row;

  justify-content: center;
  align-items: center;

  aspect-ratio: 1 / 1;
  height: 100%;

  gap: 0.5vw;

  /* Bordo visibile intorno alla griglia intera */
}

#fp3_content1_4_screen_p1_equipment>div {
  aspect-ratio: 1 / 1;
  height: 20%;

  gap: 0.5vw;

  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

#fp3_content1_4_screen_p1_equipment>div>div {

  aspect-ratio: 1 / 1;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;

  /* Bordo visibile per ogni cella */


}

#helpbox {
  position: absolute;
  background-color: #494949;
  border: 1px solid #aaa;
  padding: 10px;
  max-width: 20%;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s;
}

.hidden {
  display: none;
}

#fp3_content1_4_screen_p1_display {
  display: flex;

  flex-direction: column;

  justify-content: top;
  align-items: top;

  aspect-ratio: 1 / 1;
  height: 80%;

  overflow-y: auto;

  box-shadow: inset 0 0 0 0.15vw #ffffff;
  border-radius: 1vh;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  /* Bordo visibile intorno alla griglia intera */
}

#fp3_content1_4_screen_p1_display>div {
  gap: 0.5vw;

  margin: 1vw;

  font-family: 'Arial', sans-serif;
  /* Bordo visibile intorno alla griglia intera */
}

#ordinator {
  display: flex;

  flex-direction: row;

  justify-content: center;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orangered;
}

#content2_11 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-color: #2c2f3a;
}

#content2_11_cont {
  position: relative;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.rhombus {
  width: 8%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;

  transform: rotate(45deg);
  /* ruota la forma */
}

.rhombus>* {
  transform: rotate(-45deg);
  /* riporta dritto il contenuto */
}

#content2_11_image {

  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 220%;

  background-position: 110% 100%;
  background-repeat: no-repeat;
  background-size: 120%;
}

#content2_11_grid>* {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content2_11_grid_b1_cont,
#content2_11_grid_b2_cont,
#content2_11_grid_b3_cont,
#content2_11_grid_b4_cont,
#content2_11_grid_b5_cont,
#content2_11_grid_b6_cont,
#content2_11_grid_b7_cont,
#content2_11_grid_b8_cont,
#content2_11_grid_b9_cont {
  background-color: #2c2f3a;

  position: absolute;

  width: 80%;

  height: 80%;

  background-color: #20282e;

  z-index: 3;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  border-radius: 1vw;
  box-shadow: 0 0 3vw rgba(150, 150, 150, 0.4);
}

#content2_11_grid_b1_cont>*,
#content2_11_grid_b2_cont>*,
#content2_11_grid_b3_cont>*,
#content2_11_grid_b4_cont>*,
#content2_11_grid_b5_cont>*,
#content2_11_grid_b6_cont>*,
#content2_11_grid_b7_cont>*,
#content2_11_grid_b8_cont>*,
#content2_11_grid_b9_cont>* {
  width: 80%;
  height: 40%;

  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
}

#content2_11_grid_b1_cont_1 {
  background-color: #546288;
}


#content2_11_grid_exit {

  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;

  background-color: #36454f;

  opacity: 0.5;

  z-index: 2;
}

#content2_11_grid_b1 {
  position: absolute;
  top: 135%;
  left: 24.4%;

  background: transparent;
}

#content2_11_grid_c1 {
  position: absolute;
  top: 155%;
  left: 18.5%;

  width: 20%;
  background-color: #546288;
  border-radius: 0.5em;
}

#content2_11_grid_b2 {
  position: absolute;
  top: 120%;
  left: 69.8%;

  background: transparent;
}

#content2_11_grid_c2 {
  position: absolute;
  top: 140%;
  left: 63.8%;

  width: 20%;
  background-color: #546288;
  border-radius: 0.5em;
}

#content2_11_grid_b3 {
  position: absolute;
  top: 125%;
  left: 41%;

  background: transparent;
}

#content2_11_grid_b4 {
  position: absolute;
  top: 80%;
  left: 38.6%;

  background: transparent;
}

#content2_11_grid_c4 {
  position: absolute;
  top: 100%;
  left: 32.6%;

  width: 20%;
  background-color: #546288;
  border-radius: 0.5em;
}

#content2_11_grid_b5 {
  position: absolute;
  top: 74%;
  left: 68.4%;

  background: transparent;
}

#content2_11_grid_c5 {
  position: absolute;
  top: 94%;
  left: 62.4%;

  width: 20%;
  background-color: #546288;
  border-radius: 0.5em;
}

#content2_11_grid_b6 {
  position: absolute;
  top: 70%;
  left: 50%;

  background: transparent;
}

#content2_11_grid_b7 {
  position: absolute;
  top: 34.5%;
  left: 35.5%;

  background: transparent;
}

#content2_11_grid_c7 {
  position: absolute;
  top: 54.5%;
  left: 29.5%;

  width: 20%;
  background-color: #546288;
  border-radius: 0.5em;
}

#content2_11_grid_b8 {
  position: absolute;
  top: 40%;
  left: 59.6%;

  background: transparent;
}

#content2_11_grid_c8 {
  position: absolute;
  top: 60%;
  left: 53.6%;

  width: 20%;
  background-color: rgb(83, 97, 136);
  border-radius: 0.5em;
}

#content2_11_grid_b9 {
  position: absolute;
  top: 15%;
  left: 40%;

  background: transparent;
}

#mainMenuExit {

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #36454f;

  opacity: 0.5;

  z-index: 7;
}

#content2_11_grid_b2_cont_1 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#content2_11_grid_d1,
#content2_11_grid_d2,
#content2_11_grid_d3 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#content2_11_grid_b5_cont_1 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;

  margin: 1vw;
}

#content2_11_grid_b4_cont_1 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;

  margin: 1vw;
}

#content2_11_grid_b4_cont_2 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: row;

  margin: 1vw;
}

#content2_11_grid_b7_cont_1 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;

  margin: 1vw;
}

#content2_11_grid_b7_cont_2 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: row;

  margin: 1vw;
}

#content2_11_grid_b8_cont_1 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;

  margin: 1vw;
}

#content2_11_grid_b8_cont_2 {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: row;

  margin: 1vw;
}

#fp3_content1_8 {
  overflow-y: auto;
  background-color: #2c2f3a;
}

#fp3_content1_8>div {
  margin: 1vw;

  border-radius: 0.5em;
  background-color: #3a3f54;
}

#fp3_content1_8_auto1 {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto1>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#fp3_content1_8_auto2 {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto2>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#fp3_content1_8_auto3 {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto3>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#fp3_content1_8_auto4 {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto4>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#fp3_content1_8_auto5 {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto5>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}

#menu1,
#menu2,
#menu3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-size: 100%;
  /* scale to fill div */
  background-position: center;
  background-repeat: no-repeat;
}

#fp2_content2_1_svg {

  top: 70%;
  left: 41.5%;

  position: absolute;
  pointer-events: none;

  z-index: 5;

  width: 20%;
  height: 20%;
}

#fp2_content2_1_svg>div {
  width: 100%;
  height: 100%;
}


/* Hover sul container */
#fp2_content2_1_container:hover #fp2_content2_1_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_1_container {
  z-index: 6;
}

#fp2_content2_1_container>div,
#fp2_content2_1_container>button {
  z-index: 6;
}


#fp2_content2_1_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_1 {
  position: absolute;
  top: 70%;
  left: 37%;
  width: 32%;
  height: 25%;

  text-align: center;
  transform: translateX(-5%);

  background-color: transparent;
  border: none;

}


#fp2_content2_6_container {
  z-index: 4;
}

#fp2_content2_6_container>div {
  z-index: 4;
}

#fp2_content2_6_container>button {
  z-index: 4;
}

#fp2_content2_6_container:hover #fp2_content2_6_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_6_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_6 {
  position: absolute;
  top: 55%;
  left: 8%;
  width: 15%;
  height: 27%;

  background-color: transparent;
  border: none;

}

#fp2_content2_7_container {
  z-index: 2;
}


#fp2_content2_7_container>button {
  z-index: 4;
}

#fp2_content2_7_container:hover #fp2_content2_7_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_7_container_image {
  width: 100%;
  height: 100%;
  position: relative;
}

#fp2_content2_7_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* fisso */
  height: 100%;
  /* fisso */

  z-index: 2;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}


#fp2_content2_7 {
  position: absolute;
  top: 42%;
  left: 46%;
  width: 11%;
  height: 28%;

  background-color: transparent;
  border: none;

}

#fp2_content2_7_svg1 {
  position: absolute;
  top: 44%;
  left: 42%;
  width: 20%;
  height: 20%;

  z-index: 4;

  pointer-events: none;
}

#fp2_content2_7_svg2 {
  position: absolute;
  top: 44%;
  left: 42%;
  width: 20%;
  height: 20%;

  z-index: 4;

  pointer-events: none;
}

#fp2_content2_7_svg3 {
  position: absolute;
  top: 44%;
  left: 42%;
  width: 20%;
  height: 20%;

  z-index: 4;

  pointer-events: none;
}

#fp2_content2_7_svg4 {
  position: absolute;
  top: 44%;
  left: 42%;
  width: 20%;
  height: 20%;

  z-index: 4;

  pointer-events: none;
}

#fp2_content2_11_container {
  z-index: 1;
}

#fp2_content2_11_container>div {
  z-index: 1;
}

#fp2_content2_11_container>button {
  z-index: 4;
}

#fp2_content2_11_container:hover #fp2_content2_11_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_11_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_11 {
  position: absolute;
  top: 15%;
  left: 3%;
  width: 27%;
  height: 40%;

  background-color: transparent;
  border: none;

}

#fp2_content2_4_container {
  z-index: 4;
}

#fp2_content2_4_container>div {
  z-index: 4;
}

#fp2_content2_4_container>button {
  z-index: 6;
}

#fp2_content2_4_container:hover #fp2_content2_4_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_4_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_4 {
  position: absolute;
  top: 66%;
  left: 70%;
  width: 16%;
  height: 15%;

  background-color: transparent;
  border: none;

}

#fp2_content2_10_container {
  z-index: 4;
}

#fp2_content2_10_container>div {
  z-index: 4;
}

#fp2_content2_10_container>button {
  z-index: 6;
}

#fp2_content2_10_container:hover #fp2_content2_10_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_10_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_10 {
  position: absolute;
  top: 51%;
  left: 70%;
  width: 16%;
  height: 15%;

  background-color: transparent;
  border: none;

}

#fp2_content2_8_container {
  z-index: 4;
}

#fp2_content2_8_container>div {
  z-index: 4;
}

#fp2_content2_8_container>button {
  z-index: 6;
}

#fp2_content2_8_container:hover #fp2_content2_8_image {
  filter: brightness(0.8);
  /* illumina leggermente */
}

#fp2_content2_8_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_8 {
  position: absolute;
  top: 16%;
  left: 46%;
  width: 11%;
  height: 20%;

  background-color: transparent;

  border: none;

}

.grassFont {
  font-size: 1.75em;
  /* ingrandisce il testo */
  font-weight: bold;
  /* grassetto */
  color: white;
  /* colore interno */
  text-shadow:
    2px 2px 0 black,
    -2px 2px 0 black,
    2px -2px 0 black,
    -2px -2px 0 black;
  /* bordo più spesso */
}

.centerText {
  display: flex;
  justify-content: center;
  /* centra orizzontalmente */
  align-items: center;
  /* centra verticalmente */
  height: 100%;
  /* necessario per centrare verticalmente */
}

#fp2_content2_5 {
  position: absolute;
  top: 10%;
  left: 90%;
  width: 4%;
  height: auto;

  aspect-ratio: 1/1;
  border: none;



  background-color: transparent;
  background-image: url("images/cog.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 6;
}

#fp2_content1_8 {
  position: absolute;
  top: 20%;
  left: 90%;
  width: 4%;

  height: auto;

  aspect-ratio: 1/1;
  border: none;



  background-color: transparent;
  background-image: url("images/automation.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 6;
}

#fp2_achievements {
  position: absolute;
  top: 30%;
  left: 90%;
  width: 4%;
  height: auto;

  aspect-ratio: 1/1;
  border: none;



  background-color: transparent;
  background-image: url("images/achievements.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 6;
}

#achievements {
  background-color: #2c2f3a;
}

.bold {
  font-weight: bold;
}

.boldBlackBorder {
  font-weight: bold;
  color: white;
  text-shadow:
    0.13vw 0.13vw 0 black,
    -0.13vw 0.13vw 0 black,
    0.13vw -0.13vw 0 black,
    -0.132vw -0.13vw 0 black;
}

.boldBlackBorderObject {
  filter: drop-shadow(0.13vw 0.13vw 0.13vw black);
}

.boldBlackBorderObjectLateral {
  filter: drop-shadow(0.13vw 0 0.13vw black);
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.grey {
  color: #e0e0e0;
  /* grigio chiaro */
}

.red {
  background-color: #972a2aff;
  /* grigio chiaro */
}

.gradient-bar {
  width: 50%;
  /* Imposta la larghezza della barra */
  height: 2px;
  /* Imposta l'altezza della barra */
  background: linear-gradient(0deg, #ffffff, #ffffff);
  /* Gradiente dal viola al rosa */
  border-radius: 10px;
  /* Arrotonda gli angoli */
  display: block;
  /* Rende il div un elemento a blocco */
  margin: 0 auto;
  /* Centra la barra orizzontalmente */
}

.blu {
  background-color: rgb(29, 29, 65);
}

.image {
  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.height150 {
  height: 150%;
}

#ascension-controls {
  position: absolute;
  top: 1%;
  right: 1%;
  z-index: 10;

  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
}

#ascension-controls button {
  padding: 1% 1%;
}

#fp2_content2_12_container {
  z-index: 4;
}

#fp2_content2_12_container>div {
  z-index: 4;
}

#fp2_content2_12_container>button {
  z-index: 6;
}

#fp2_content2_12_container:hover #fp2_content2_12_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_12_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_12 {
  position: absolute;
  top: 86.3%;
  left: 27.2%;
  width: 8.8%;
  height: 6%;

  background-color: transparent;

  border: none;

}



#fp2_content2_13_container {
  z-index: 4;
}

#fp2_content2_13_container>div {
  z-index: 4;
}

#fp2_content2_13_container>button {
  z-index: 6;
}

#fp2_content2_13_container:hover #fp2_content2_13_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_13_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_13 {
  position: absolute;
  top: 76.3%;
  left: 87.2%;
  width: 5%;
  height: 3%;

  background-color: transparent;

  border: none;

}



#fp2_content2_14_container {
  z-index: 4;
}

#fp2_content2_14_container>div {
  z-index: 4;
}

#fp2_content2_14_container>button {
  z-index: 6;
}

#fp2_content2_14_container:hover #fp2_content2_14_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_14_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_14 {
  position: absolute;
  top: 75.8%;
  left: 2.2%;
  width: 5%;
  height: 3%;

  background-color: transparent;

  border: none;

}


#fp2_content2_15_container {
  z-index: 4;
}

#fp2_content2_15_container>div {
  z-index: 4;
}

#fp2_content2_15_container>button {
  z-index: 6;
}

#fp2_content2_15_container:hover #fp2_content2_15_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_15_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_15 {
  position: absolute;
  top: 29%;
  left: 58.6%;
  width: 5%;
  height: 3%;

  background-color: transparent;

  border: none;

}


#fp2_content2_16_container {
  z-index: 4;
}

#fp2_content2_16_container>div {
  z-index: 4;
}

#fp2_content2_16_container>button {
  z-index: 6;
}

#fp2_content2_16_container:hover #fp2_content2_16_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_16_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: 100%;

  background-image: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#fp2_content2_16 {
  position: absolute;
  top: 33%;
  left: 29%;
  width: 5%;
  height: 3%;

  background-color: transparent;

  border: none;

}

#content2_12 {
  background-color: #2c2f3a;
}

#content2_13 {
  background-color: #2c2f3a;
}

#content2_14 {
  background-color: #2c2f3a;
}

#content2_15 {
  background-color: #2c2f3a;
}

#content2_16 {
  background-color: #2c2f3a;
}

.orderedText {
  width: 98%;
  height: 98%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
  margin: 1%;
  color: #bafafc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  white-space: pre-wrap;

  line-height: 160%;
  font-size: 1.75em;
}

.orderedText p {
  margin-bottom: 1.5%;
  /* Spazio tra paragrafi relativo */
}

#options_discord{

  width: 8%;
  height: auto;

  aspect-ratio: 1/1;
  border: none;

    background-color: transparent;
  background-image: url("images/discord logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}