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;
  }
}

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

  #content {
    font-size: 1cqw;
  }
}

.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.05vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);
}

.defaultButton:hover {
  filter: saturate(3);
}

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

  box-shadow: inset 0 0 0 0.05vw #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.05vw #ffffff,
    0vh 0.3vw rgba(0, 0, 0, 0.7);
  width: 5%;
}

.defaultButton5:hover {
  filter: saturate(3);
}

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

  box-shadow: inset 0 0 0 0.05vw #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.05vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 15%;
}

.defaultButton15:hover {
  filter: saturate(3);
}

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

  box-shadow: inset 0 0 0 0.05vw #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.05vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 30%;
}

.defaultButton30:hover {
  filter: saturate(3);
}

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

  box-shadow: inset 0 0 0 0.05vw #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.05vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);

  width: 100%;
}

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

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

  box-shadow: inset 0 0 0 0.05vw #ffffff,
    0.1vh 0.1vh 0.25vh rgba(0, 0, 0, 0.5);
}

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

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

  width: 100%;
}

.defaultButton100Version2:hover {
  filter: saturate(3);
}

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

  box-shadow: inset 0 0 0 0.05vw #ffffff,
    0.1vh 0.1vh 0.25vh rgba(0, 0, 0, 0.5);
}

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

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

  width: 100%;
}

.defaultButton100Version4 {
  background: #36454f;
  border-radius: 0vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;

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

  width: 100%;
}

.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;
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

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

.bdefaultButtonSkin {
  background: #36454f;
  border-radius: 1vw;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

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

  box-shadow:
    0% 2% rgba(0, 0, 0, 0.7),
    2% 0% 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(1%);
  transform: translateX(1%);
  transform: rotate(45deg);

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

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

.defaultRoundButton {
  background: #36454f;
  border-radius: 50%;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  padding: 0.5%;
  aspect-ratio: 1/1;

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

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

.defaultRoundButton: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);
}

.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;
}

.centerDivTop {
  display: flex;
  align-items: center;
  text-align: center;
}

.centerDivLeft {
  display: flex;
  align-items: left;
  text-align: center;
}

.centerDivTopColumns {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

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

.centerDivTopColumns {
  display: flex;
  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;
}

.Click {
  pointer-events: auto;
}

/* 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: 10%;

  width: 100%;

  display: flex;
  flex-direction: row;


  font-size: 1.4cqw;

  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_content1 {
  width: 100%;
  height: 100%;
}

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

#fp2_content3 {
  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-top: 1vw;
  margin-bottom: 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;
}

#optionsMisc {
  width: 100%;
  height: 30%;

}

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

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

#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: scroll;
}

#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: 100%;
  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;
}

#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;
  }
}

#powerValute {
  height: 100%;
  width: 10%;
  left: 0%;
  background-color: rgba(90, 99, 99, 0.5);
}

#universeValute {
  height: 100%;
  width: 10%;
  left: 10%;
  background-color: rgba(90, 99, 99, 0.5);
}

#essenceValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}

#universalShardsBase {
  height: 100%;
  width: 10%;
  left: 30%;
  background-color: rgba(90, 99, 99, 0.5);
}

#universalNodesBase {
  height: 100%;
  width: 10%;
  left: 40%;
  background-color: rgba(90, 99, 99, 0.5);
}

#universalCoresBase {
  height: 100%;
  width: 10%;
  left: 50%;
  background-color: rgba(90, 99, 99, 0.5);
}

#fireValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}

#waterValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}

#earthValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}

#windValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}

#metalValute {
  height: 100%;
  width: 10%;
  left: 20%;
  background-color: rgba(90, 99, 99, 0.5);
}


#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;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

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

  border-radius: 50%;
  background: rgb(18, 56, 68);

  padding: 1%;
  box-sizing: border-box;
  /* rimuovo overflow hidden */
  overflow: visible;
}

#content1_7_ascension svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* sopra all'SVG */
}

#content1_7_ascension>div,
#content1_7_ascension>button {
  margin: 0.5em 0;
  z-index: 10;
  /* sopra all'SVG */
}

#content1_7_ascension_button_text {
  pointer-events: none;
}

#content1_7_ascension_description {
  text-align: center;
  color: #fff;
  font-size: 1.2cqw;
  line-height: 1.4em;
  max-width: 90%;
}

#content1_7_ascension_milestones {
  width: 75%;
  max-height: 50%;
  /* prima 30%, ora metà del cerchio */
  overflow-y: auto;
  overflow-x: hidden;

  margin-top: 1em;
  border-radius: 0.5em;
}

#content1_7_ascension_milestones>div {
  font-size: 1cqw;
  width: 100%;
  padding: 0.5em;

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

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

  margin-bottom: 0.5em;
  border-radius: 0.5em;
}

#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-between;


  width: 100%;
}

#content2_7_b1>* {

  height: 100;
}

#content2_7_b1_b {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1%;
  margin-left: 1%;
}

#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_7_b1_cont1 {
  width: 40%;
}

#content2_7_b1_cont2 {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
}

#content2_7_b1_cont3 {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;

  font-size: 1.25em;

}

#content2_7_l1 {
  width: 33%;

  margin-right: 1%;
  margin-left: 1%;

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

#content2_7_l1_cont {
  width: 100%;
}

#content2_7_l_loadout1 {
  width: 80%;
}

#content2_7_l_loadout1_b1 {
  width: 50%;
}

#content2_7_l_loadout1_b2 {
  width: 50%;
}



#content2_7_l2 {
  width: 33%;
  margin-right: 1%;
  margin-left: 1%;

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

#content2_7_l2_cont {
  width: 100%;
}

#content2_7_l_loadout2 {
  width: 80%;
}

#content2_7_l_loadout2_b1 {
  width: 50%;
}

#content2_7_l_loadout2_b2 {
  width: 50%;
}

#content2_7_l3 {
  width: 33%;
  margin-right: 1%;
  margin-left: 1%;

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

#content2_7_l3_cont {
  width: 100%;
}

#content2_7_l_loadout3 {
  width: 80%;
}

#content2_7_l_loadout3_b1 {
  width: 50%;
}

#content2_7_l_loadout3_b2 {
  width: 50%;
}

#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;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

.orange {
  background-color: orangered;
}

.redText {
  color: red;
}

.greenTex {
  color: green;
}

.blueTex {
  color: blue;
}

.yellowTex {
  color: yellow;
}

.purpleTex {
  color: purple;
}

.orangeTex {
  color: orangered;
}

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

  background-color: #2c2f3a;
}

#content2_11_description {
  background-color: transparent;
  bottom: 0%;


  position: absolute;
  padding: 0.5%;
  background-color: rgba(145, 191, 216, 0.4)
}

#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: 170%;
  left: 24.4%;

  background: transparent;
}

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

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

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

  background: transparent;
}

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

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

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

  background: transparent;
}

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

  background: transparent;
}

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

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

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

  background: transparent;
}

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

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

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

  background: transparent;
}

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

  background: transparent;
}

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

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

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

  background: transparent;
}

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

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

#content2_11_grid_b9 {
  position: absolute;
  top: 50%;
  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: 1%;
  overflow-y: auto;
  border-radius: 0.5em;
  background-color: #2c2f3a;
}

#fp3_content1_8>div>div {
  margin: 1%;
  border-radius: 0.5em;
  background-color: #3a3f54;
  padding: 0.5%;
}

#fp3_content1_8_auto1,
#fp3_content1_8_auto2,
#fp3_content1_8_auto3,
#fp3_content1_8_auto4,
#fp3_content1_8_auto5,
#fp3_content1_8_auto6,
#fp3_content1_8_auto7,
#fp3_content1_8_auto8,
#fp3_content1_8_auto9,
#fp3_content1_8_auto10,
#fp3_content1_8_auto11,
#fp3_content1_8_auto12,
#fp3_content1_8_auto13,
#fp3_content1_8_auto14,
#fp3_content1_8_auto15,
#fp3_content1_8_auto16,
#fp3_content1_8_auto17 {
  margin: 1%;
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
}

#fp3_content1_8_auto1>div,
#fp3_content1_8_auto2>div,
#fp3_content1_8_auto3>div,
#fp3_content1_8_auto4>div,
#fp3_content1_8_auto5>div,
#fp3_content1_8_auto6>div,
#fp3_content1_8_auto7>div,
#fp3_content1_8_auto8>div,
#fp3_content1_8_auto9>div,
#fp3_content1_8_auto10>div,
#fp3_content1_8_auto11>div,
#fp3_content1_8_auto12>div,
#fp3_content1_8_auto13>div,
#fp3_content1_8_auto14>div,
#fp3_content1_8_auto15>div,
#fp3_content1_8_auto16>div,
#fp3_content1_8_auto17>div {
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
}


#fp3_content1_8_auto6_c1 {
  width: 50%;
}

#fp3_content1_8_auto6_c1>div {
  width: 70%;
}

#menu1,
#menu2,
#menu3,
#menu4 {
  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: 11%;
  left: 92%;
  width: 4%;
  height: auto;

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

  border-radius: 10%;



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

  z-index: 6;
}

#fp2_content2_pageSel {
  position: absolute;
  top: 31%;
  left: 92%;
  width: 4%;

  height: auto;

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

  border-radius: 10%;



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

  z-index: 6;
}

#fp2_content3_pageSel {
  position: absolute;
  top: 41%;
  left: 92%;
  width: 4%;

  height: auto;

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

  border-radius: 10%;

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

  z-index: 6;
}

#fp2_content1_8 {
  position: absolute;
  top: 21%;
  left: 92%;
  width: 4%;

  height: auto;

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

  border-radius: 10%;

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

  z-index: 6;
}

#fp2_content2_17_container:hover #fp2_content2_17_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_17_container {
  z-index: 6;
}

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


#fp2_content2_17_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_17 {
  position: absolute;
  top: 51%;
  left: 5%;
  width: 16%;
  height: 46%;

  text-align: center;
  background-color: transparent;

  border: none;
}

#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;
}

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

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

.grey {
  color: #ffffffa2;
}

.red {
  background-color: #972a2aff;
}

.red {
  background-color: #972a2aff;
}

.bluOpaque {
  background-color: rgba(62, 42, 151, 0.5);
}

.orangeOpaque {
  background-color: rgba(151, 144, 42, 0.5);
}

.orange {
  background-color: rgb(151, 86, 42);
}

.yellow {
  background-color: rgb(187, 180, 89);
}

.blu {
  background-color: rgb(42, 111, 151)
}

.black {
  background-color: rgb(100, 0, 0)
}

.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 */
}

.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;

}

#fp2_content2_18_container {
  z-index: 7;
}

#fp2_content2_18_container>div {
  z-index: 7;
}

#fp2_content2_18_container>button {
  z-index: 7;
}

#fp2_content2_18_container:hover #fp2_content2_18_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_18 {
  position: absolute;
  top: 44.5%;
  left: 5.7%;
  width: 6%;
  height: 4%;

  background-color: transparent;
  border: none;

}

#fp2_content2_19_container {
  z-index: 7;
}

#fp2_content2_19_container>div {
  z-index: 7;
}

#fp2_content2_19_container>button {
  z-index: 7;
}

#fp2_content2_19_container:hover #fp2_content2_19_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_19 {
  position: absolute;
  top: 52.5%;
  left: 33%;
  width: 14.5%;
  height: 29%;

  background-color: transparent;
  border: none;
}

#fp2_content2_20_container {
  z-index: 7;
}

#fp2_content2_20_container>div {
  z-index: 7;
}

#fp2_content2_20_container>button {
  z-index: 7;
}

#fp2_content2_20_container:hover #fp2_content2_20_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_20 {
  position: absolute;
  top: 59%;
  left: 48.3%;
  width: 6%;
  height: 4%;

  background-color: transparent;
  border: none;

}

#fp2_content2_21_container {
  z-index: 7;
}

#fp2_content2_21_container>div {
  z-index: 7;
}

#fp2_content2_21_container>button {
  z-index: 7;
}

#fp2_content2_21_container:hover #fp2_content2_21_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_21 {
  position: absolute;
  top: 28%;
  left: 62%;
  width: 14%;
  height: 39%;

  background-color: transparent;
  border: none;

}

#fp2_content2_22_container {
  z-index: 7;
}

#fp2_content2_22_container>div {
  z-index: 7;
}

#fp2_content2_22_container>button {
  z-index: 7;
}

#fp2_content2_22_container:hover #fp2_content2_22_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_22 {
  position: absolute;
  top: 44%;
  left: 54.5%;
  width: 6%;
  height: 4%;

  background-color: transparent;
  border: none;

}

#fp2_content2_23_container {
  z-index: 6;
}

#fp2_content2_23_container>div {
  z-index: 6;
}

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

#fp2_content2_23_container:hover #fp2_content2_23_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

#fp2_content2_23_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_23 {
  position: absolute;
  top: 68%;
  left: 69%;
  width: 20%;
  height: 28%;

  background-color: transparent;
  border: none;

}

#fp2_content2_24_container {
  z-index: 7;
}

#fp2_content2_24_container>div {
  z-index: 7;
}

#fp2_content2_24_container>button {
  z-index: 7;
}

#fp2_content2_24_container:hover #fp2_content2_24_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_24 {
  position: absolute;
  top: 60%;
  left: 81%;
  width: 6%;
  height: 4%;

  background-color: transparent;
  border: none;

}

#fp2_content2_25_container {
  z-index: 7;
}

#fp2_content2_25_container>div {
  z-index: 7;
}

#fp2_content2_25_container>button {
  z-index: 7;
}

#fp2_content2_25_container:hover #fp2_content2_25_image {
  filter: brightness(1.3);
  /* illumina leggermente */
}

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

  height: 100%;

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

#fp2_content2_25 {
  position: absolute;
  top: 11%;
  left: 43%;
  width: 13%;
  height: 31%;

  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;
}

#content2_18 {
  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;
}

#options_kofi {

  position: absolute;

  margin: 1%;

  width: 6%;
  height: auto;

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

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

  
  bottom: 0% !important;
  right: 0% !important; 
}

#mainMenuDirectionArrow1 {
  position: absolute;
  width: 100%;
  height: 5%;

  bottom: 2.5%;
  aspect-ratio: 1/1;
  border: none;

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

  pointer-events: none;
}

.width10 {
  width: 10%;
}

.width20 {
  width: 20%;
}

.width30 {
  width: 30%;
}

.width40 {
  width: 40%;
}

.width50 {
  width: 50%;
}

.width60 {
  width: 60%;
}

.width70 {
  width: 70%;
}

.width80 {
  width: 80%;
}

.width90 {
  width: 90%;
}

.width100 {
  width: 100%;
}

.width1_3 {
  width: calculated(100% / 3);
}

.height5 {
  height: 5%;
}

.height10 {
  height: 10%;
}

.height15 {
  height: 15%;
}

.height20 {
  height: 20%;
}

.height25 {
  height: 25%;
}

.height30 {
  height: 30%;
}

.height35 {
  height: 35%;
}

.height40 {
  height: 40%;
}

.height45 {
  height: 45%;
}

.height50 {
  height: 50%;
}

.height55 {
  height: 55%;
}

.height60 {
  height: 60%;
}

.height70 {
  height: 70%;
}

.height80 {
  height: 80%;
}

.height90 {
  height: 90%;
}

.height100 {
  height: 100%;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

.transparent {
  background-color: transparent;
}

.marginTop5 {
  margin-top: 5%;
}

.margin1 {
  margin: 1%;
}

.margin2 {
  margin: 2%;
}

.margin3 {
  margin: 3%;
}

.margin4 {
  margin: 4%;
}

.margin5 {
  margin: 5%;
}

.paddingTop1 {
  padding-top: 1%;
}

.paddingTop10 {
  padding-top: 10%;
}

.padding1 {
  padding: 1%;
}

.padding2 {
  padding: 2%;
}

.padding3 {
  padding: 3%;
}

.padding4 {
  padding: 4%;
}

.padding5 {
  padding: 5%;
}

.topLeft {
  top: 0%;
  left: 0%;
}

.topRight {
  top: 0%;
  right: 0%;
}

.bottomLeft {
  bottom: 0%;
  left: 0%;
}

.bottomRight {
  bottom: 0%;
  right: 0%;
}

.left {
  left: 0%;
}

.left10 {
  left: 10%;
}

.left20 {
  left: 20%;
}

.left30 {
  left: 30%;
}

.left40 {
  left: 40%;
}

.left50 {
  left: 50%;
  transform: translateX(-50%);
}

.left60 {
  left: 60%;
}

.left70 {
  left: 70%;
}

.left80 {
  left: 80%;
}

.left90 {
  left: 90%;
}

.right {
  right: 0%;
}

.right5 {
  right: 5%;
}

.right10 {
  right: 10%;
}

.right20 {
  right: 20%;
}

.right30 {
  right: 30%;
}

.right40 {
  right: 40%;
}

.right50 {
  right: 50%;
  transform: translateX(50%);
}

.right60 {
  right: 60%;
}

.right70 {
  right: 70%;
}

.right80 {
  right: 80%;
}

.right90 {
  right: 90%;
}

.top {
  top: 0%;
}

.bottom {
  bottom: 0%;
}

.top10 {
  top: 10%;
}

.top18 {
  top: 18%;
}

.top20 {
  top: 20%;
}

.top30 {
  top: 30%;
}

.top40 {
  top: 40%;
}

.top50 {
  top: 50%;
}

.top60 {
  top: 60%;
}

.top70 {
  top: 70%;
}

.top80 {
  top: 80%;
}

.top90 {
  top: 90%;
}

.top100 {
  top: 100%;
}

.gridCenter {
  display: grid;
  place-items: center;
}

.centerTop {
  top: 50%;
  transform: translateY(-50%);
}

.centerLeft {
  left: 50%;
  transform: translateX(-50%);
}

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flexAlignBottom {
  align-items: flex-end;
}

.sameCell {
  grid-area: 1 / 1;
}


#content2_17 {
  position: relative;

  background-color: #2c2f3a;
  overflow: none;
}


#content2_17_size {
  transform: scale(1);
}

#content2_17_limit1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

#content2_17_limit2 {
  position: absolute;
  top: 0%;
  left: 299%;
}

#content2_17_limit3 {
  position: absolute;
  top: 900%;
  left: 0%;
}

#content2_17_limit4 {
  position: absolute;
  top: 900%;
  left: 299%;
}

#content2_17_svg1 {
  position: absolute;
  width: 65%;
  aspect-ratio: 1/1;
  top: 400%;
  left: 44%;
}

svg#content2_17_lineLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

#content2_17_zone1 {
  width: 93%;
  height: 125%;
  position: absolute;
  top: 545%;
  left: -5%;
  border-radius: 0.5em;
  border: 5px dashed #972a2aff;
}

#content2_17_zone2 {
  width: 142%;
  height: 105%;
  position: absolute;
  top: 545%;
  left: 156%;
  border-radius: 0.5em;
  border: 5px dashed rgb(151, 86, 42);
}

#content2_17_zone3 {
  width: 280%;
  height: 200%;
  position: absolute;
  top: 670%;
  left: -5%;
  border-radius: 0.5em;
  border: 5px dashed rgb(187, 180, 89);
}

#content2_17_zone4 {
  width: 205%;
  height: 128%;
  position: absolute;
  top: 396%;
  left: 89%;
  border-radius: 0.5em;
  border: 5px dashed rgb(134, 11, 11);
}

#content2_17_zone5 {
  width: 205%;
  height: 128%;
  position: absolute;
  top: 270%;
  left: 89%;
  border-radius: 0.5em;
  border: 5px dashed rgb(83, 3, 3);
}


#content2_17_zone6 {
  width: 205%;
  height: 128%;
  position: absolute;
  top: 145%;
  left: 89%;
  border-radius: 0.5em;
  border: 5px dashed rgb(0, 0, 0);
}


#content2_17_node1 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 525%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node2 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node3 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node4 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node5 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node6 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node7 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node8 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node9 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node10 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node11 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 113%;
  border-radius: 0.5em;
  box-shadow: 0 0 3vw rgba(255, 145, 0, 0.4);
}

#content2_17_node12 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node13 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node14 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node15 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node16 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node17 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node18 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node19 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node20 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node21 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node22 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node23 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node24 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node25 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node26 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node27 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 675%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node28 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 675%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node29 {
  width: 43%;
  height: 100%;
  position: absolute;
  top: 700%;
  left: 101.5%;
  border-radius: 0.5em;
}

#content1_17_node29_milestones {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 1em;
  border-radius: 0.5em;
}

#content1_17_node29_milestones>div {
  font-size: 1cqw;
  width: 100%;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #36454f;
  box-shadow: inset 0 0 0 0.15vw #ffffff;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  margin-bottom: 0.5em;
  border-radius: 0.5em;
}

#content2_17_node30 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node31 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node32 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node33 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node34 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node35 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node36 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node37 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node38 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 675%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node39 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 650%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node40 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 650%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node41 {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 655%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node42 {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 690%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node43 {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 725%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node44 {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 760%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node45 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node46 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node47 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node48 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 675%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node49 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 675%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node50 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node51 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node52 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node53 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node54 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node55 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node56 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node57 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 44%;
  border-radius: 0.5em;
}

#content2_17_node58 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node59 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node60 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node61 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node62 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node63 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 800%;
  left: 67%;
  border-radius: 0.5em;
}

#content2_17_node64 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 182%;
  border-radius: 0.5em;
}

#hellInfo1 {
  width: 67%;
  height: 70%;
  position: absolute;
  top: 400%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node65 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node66 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node67 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node68 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node69 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node70 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node71 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node72 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node73 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node74 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node75 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node76 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node77 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node78 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node79 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node80 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node81 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node82 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node83 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 500%;
  left: 113%;
  border-radius: 0.5em;
}

#hellPowers1 {
  width: 135%;
  height: 20%;
  position: absolute;
  top: 475%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node84 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 475%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node85 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 475%;
  left: 136%;
  border-radius: 0.5em;
}

#hellInfo2 {
  width: 67%;
  height: 70%;
  position: absolute;
  top: 275%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node86 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node87 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node88 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node89 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node90 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node91 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node92 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node93 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node94 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 325%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node95 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 325%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node96 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 325%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node97 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 325%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node98 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node99 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node100 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node101 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node102 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node103 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node104 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node105 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node106 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node107 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 350%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node108 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 350%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node109 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 350%;
  left: 90%;
  border-radius: 0.5em;
}

#hellPowers2 {
  width: 135%;
  height: 20%;
  position: absolute;
  top: 350%;
  left: 159%;
  border-radius: 0.5em;
}

#hellInfo3 {
  width: 67%;
  height: 70%;
  position: absolute;
  top: 150%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node110 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node111 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node112 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node113 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node114 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node115 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node116 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node117 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node118 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 150%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node119 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 150%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node120 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 150%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node121 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 150%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node122 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node123 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node124 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node125 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node126 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node127 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node128 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node129 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node130 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 250%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node131 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node132 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 136%;
  border-radius: 0.5em;
}

#content2_17_node133 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 90%;
  border-radius: 0.5em;
}

#content2_17_node134 {
  width: 43%;
  height: 30%;
  position: absolute;
  top: 805%;
  left: 101.5%;
  border-radius: 0.5em;
}

#content2_17_node135 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 850%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_node136 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node137 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node138 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node139 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node140 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node141 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node142 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node143 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 800%;
  left: 195%;
  border-radius: 0.5em;
}

#content2_17_node144 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node145 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 700%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node146 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node147 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 725%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node148 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node149 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 750%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node150 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node151 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 775%;
  left: -2%;
  border-radius: 0.5em;
}

#hellPowers3 {
  width: 135%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node152 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node153 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 550%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node154 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node155 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 159%;
  border-radius: 0.5em;
}

#content2_17_node156 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 182%;
  border-radius: 0.5em;
}

#content2_17_node157 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_17_node158 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 228%;
  border-radius: 0.5em;
}

#content2_17_node159 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node160 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 575%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node161 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node162 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 625%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node163 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 650%;
  left: 21%;
  border-radius: 0.5em;
}

#content2_17_node164 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 650%;
  left: -2%;
  border-radius: 0.5em;
}

#content2_17_node165 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node166 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node167 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 251%;
  border-radius: 0.5em;
}

#content2_17_node168 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 400%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node169 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node170 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 274%;
  border-radius: 0.5em;
}

#content2_17_node171 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 113%;
  border-radius: 0.5em;
}

#content2_17_menu {
  position: sticky;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 9999;

  display: flex;
  justify-content: left;

  pointer-events: none;
  /* 👈 NON blocca click in generale */
}



#content2_17_menu>* {
  margin: 1%;
  pointer-events: auto;
  /* 👈 Solo i figli possono ricevere click */
}

#content2_17_valutes_content {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: min-content; 
  width: 70%;
}

#content2_17_valutes_content > * {
  pointer-events: all;
  width: 100%; 
  background-color: rgba(90, 99, 99, 0.8);
}



#content2_19 {
  position: relative;

  background-color: #2c2f3a;
  overflow: none;
}


#content2_19_size {
  transform: scale(1);
}

#content2_19_limit1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

#content2_19_limit2 {
  position: absolute;
  top: 0%;
  left: 200%;
}

#content2_19_limit3 {
  position: absolute;
  top: 700%;
  left: 0%;
}

#content2_19_limit4 {
  position: absolute;
  top: 700%;
  left: 200%;
}

svg#content2_19_lineLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

#content2_19_menu {
  position: sticky;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 9999;

  display: flex;
  justify-content: left;

  pointer-events: none;
}

#content2_19_menu>* {
  margin: 1%;
  pointer-events: auto;
}

#content2_19_valutes_content {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: min-content; 
  width: 70%;
}

#content2_19_valutes_content > * {
  pointer-events: all;
  width: 100%; 
  background-color: rgba(90, 99, 99, 0.8);
}

#content2_19_grid1 {
  display: grid;
  width: 30%;
  height: 50%;
  overflow-y: auto;
  position: absolute;
  top: 140%;
  left: 43%;
  border-radius: 0.5em;
  gap: 0.5vw;

  grid-template-columns: repeat(4, 1fr) !important;
  /* 3 colonne */
  grid-template-rows: repeat(25, 1fr) !important;
  /* 34 righe */
}


#content2_19_grid1>* {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#content2_19_potionSel {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-auto-rows: 40%;
  gap: 1%;
  width: 64%;
  height: 50%;
  overflow-y: auto;
  position: absolute;
  top: 140%;
  left: 10%;
  border-radius: 0.5em;
}

#content2_19_potionSel>div {
  height: 100%;
  max-height: 100%;
  width: 100%;
  margin-top: 2%;
  overflow: hidden;
}

#content2_19_potionSel>div>div {
  width: 100%;
  max-height: 100%;
}

#content2_19_tutorial {
  width: 30%;
  height: 19%;
  position: absolute;
  top: 120%;
  left: 10%;
  border-radius: 0.5em;
}


#content2_19_potionEquip {
  display: grid;
  width: 20%;
  height: 50%;
  overflow-y: auto;
  position: absolute;
  top: 140%;
  left: 76%;
  border-radius: 0.5em;
  gap: 0.5vw;
}

#content2_19_potionUpgrade {
  width: 86%;
  height: 60%;
  position: absolute;
  top: 195%;
  left: 10%;
  border-radius: 0.5em;
  gap: 0.5vw;
}

#content2_19_potionDelete {
  display: grid;
  height: 15%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 120%;
  left: 43%;
  border-radius: 0.5em;
  gap: 0.5vw;
}

#content2_19_potion_info {
  position: sticky;
  top: 60%;
  left: 0%;
  width: 20%;
  height: 30%;
  z-index: 9999;
}

#svgAnimationContainer {
  z-index: 1;
}

#svgAnimationContainer2 {
  z-index: 1;
}

#svgAnimationContainer3 {
  z-index: 1;
}

.fontSize5 {
  font-size: 5cqw;
}

.fontSize1_5 {
  font-size: 1.5cqw;
}

.fontSize1 {
  font-size: 1cqw;
}

.panel {
  container-type: inline-size;
}

.fontSize09 {
  font-size: 0.9cqw;
}

.fontSize08 {
  font-size: 0.8cqw;
}

.fontSize07 {
  font-size: 0.7cqw;
}

#content2_17_resizeBig,
#content2_19_resizeBig,
#content2_21_resizeBig,
#content2_23_resizeBig,
#content2_25_resizeBig {
  width: 3%;
}

#content2_17_resizeSmall,
#content2_19_resizeSmall,
#content2_21_resizeSmall,
#content2_23_resizeSmall,
#content2_25_resizeSmall {
  width: 3%;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinFast {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.scrollPage {
  overflow: auto;
  scroll-behavior: auto;

}

#content2_17_size {
  transform: scale(1);
}

@keyframes waveDistortion {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.6)) blur(1px);
  }

  25% {
    transform: scale(1.03) rotate(2deg);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) blur(2px);
  }

  50% {
    transform: scale(0.98) rotate(-2deg);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5)) blur(1px);
  }

  75% {
    transform: scale(1.04) rotate(1deg);
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.9)) blur(2px);
  }

  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.6)) blur(1px);
  }
}

.wave-filter {
  animation: waveDistortion 6s ease-in-out infinite;
  transform-origin: center;
  transition: filter 0.3s ease;
}

#content2_19_potion_item1 {
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_potion_item2 {
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_potion_item3 {
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_potion_item4 {
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_potion_item5 {
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#gameCurtain {
  position: absolute;
  background-color: #1a1c2c;
  width: 100%;
  height: 100%;

  z-index: 1000000000;

  color: white;
  /* Cambia il colore del testo in blu */
}

#content2_19_circle1 {
  width: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 75%;
  left: 136%;

  border-radius: 50%;
}

#content2_19_circle1_fill {
  background: linear-gradient(to top, #2ee3ff 20%, #14656b 20%);
  /* Green fills from bottom up */
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Ensure it's on top */

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

#content2_19_circle2 {
  width: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 175%;
  left: 136%;

  border-radius: 50%;
}

#content2_19_circle2_fill {
  background: linear-gradient(to top, #2ee3ff 20%, #14656b 20%);
  /* Green fills from bottom up */
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Ensure it's on top */

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

#content2_19_circle3 {
  width: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 275%;
  left: 136%;

  border-radius: 50%;
}

#content2_19_circle3_fill {
  background: linear-gradient(to top, #2ee3ff 20%, #14656b 20%);
  /* Green fills from bottom up */
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Ensure it's on top */

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



#content2_19_circle4 {
  width: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 507.5%;
  left: 90%;

  border-radius: 50%;
}

#content2_19_circle4_fill {
  background: linear-gradient(to top, #2ee3ff 20%, #14656b 20%);
  /* Green fills from bottom up */
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Ensure it's on top */

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

#content2_19_zone1 {
  width: 92%;
  height: 375%;
  position: absolute;
  top: 0%;
  left: 100%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_19_zone2 {
  width: 94%;
  height: 108%;
  position: absolute;
  top: 0%;
  left: 5%;

  border-radius: 0.5em;

  border: 5px dashed rgb(151, 86, 42);

  z-index: -10;
}

#content2_19_zone3 {
  width: 94%;
  height: 150%;
  position: absolute;
  top: 110%;
  left: 5%;

  border-radius: 0.5em;

  border: 5px dashed rgb(187, 180, 89);
  z-index: -10;

}

#content2_19_node1 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 20%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node2 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 45%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node3 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 100%;

  border-radius: 0.5em;
}

#content2_19_node4 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 120%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node5 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 172%;

  border-radius: 0.5em;
}

#content2_19_node6 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 77%;

  border-radius: 0.5em;
}

#content2_19_node7 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 57.5%;
  left: 77%;

  border-radius: 0.5em;
}

#content2_19_node8 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 32.5%;
  left: 77%;

  border-radius: 0.5em;
}

#content2_19_node9 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 7.5%;
  left: 77%;

  border-radius: 0.5em;
}

#content2_19_node10 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 54%;

  border-radius: 0.5em;
}

#content2_19_node11 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 57.5%;
  left: 54%;

  border-radius: 0.5em;
}

#content2_19_node12 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 32.5%;
  left: 54%;

  border-radius: 0.5em;
}

#content2_19_node13 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 7.5%;
  left: 54%;

  border-radius: 0.5em;
}

#content2_19_node14 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 31%;

  border-radius: 0.5em;
}

#content2_19_node15 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 57.5%;
  left: 31%;

  border-radius: 0.5em;
}

#content2_19_node16 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 32.5%;
  left: 31%;

  border-radius: 0.5em;
}

#content2_19_node17 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 7.5%;
  left: 31%;

  border-radius: 0.5em;
}

#content2_19_node18 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 82.5%;
  left: 8%;

  border-radius: 0.5em;
}

#content2_19_node19 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 57.5%;
  left: 8%;

  border-radius: 0.5em;
}

#content2_19_node20 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 32.5%;
  left: 8%;

  border-radius: 0.5em;
}

#content2_19_node21 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 7.5%;
  left: 8%;

  border-radius: 0.5em;
}

#content2_19_node22 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 145%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node23 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 182.5%;
  left: 100%;

  border-radius: 0.5em;
}

#content2_19_node24 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 220%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node25 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 182.5%;
  left: 172%;

  border-radius: 0.5em;
}

#content2_19_node26 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 245%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node27 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 282.5%;
  left: 100%;

  border-radius: 0.5em;
}

#content2_19_node28 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 320%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node29 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 282.5%;
  left: 172%;

  border-radius: 0.5em;
}

#content2_19_node30 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 45%;
  left: 100%;

  border-radius: 0.5em;
}


#content2_19_node31 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 45%;
  left: 172%;

  border-radius: 0.5em;
}


#content2_19_node32 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 120%;
  left: 100%;

  border-radius: 0.5em;
}


#content2_19_node33 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 120%;
  left: 172%;

  border-radius: 0.5em;
}

#content2_19_node34 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 145%;
  left: 159%;

  border-radius: 0.5em;
}

#content2_19_node35 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 220%;
  left: 113%;

  border-radius: 0.5em;
}

#content2_19_node36 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 220%;
  left: 159%;

  border-radius: 0.5em;
}

#content2_19_node37 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 320%;
  left: 159%;

  border-radius: 0.5em;
}

#content2_19_node38 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 345%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node39 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 345%;
  left: 159%;

  border-radius: 0.5em;
}

#content2_19_node40 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 375%;
  left: 48%;

  border-radius: 0.5em;
}

#content2_19_node41 {
  width: 80%;
  height: 30%;
  position: absolute;
  top: 390%;
  left: 59.5%;

  border-radius: 0.5em;
}

#content2_19_node42 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 90%;

  border-radius: 0.5em;
}

#content2_19_node43 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 78%;

  border-radius: 0.5em;
}

#content2_19_node44 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 425%;
  left: 101%;

  border-radius: 0.5em;
}

#content2_19_node45 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 67%;

  border-radius: 0.5em;
}

#content2_19_node46 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 450%;
  left: 113%;

  border-radius: 0.5em;
}

#content2_19_node47 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 512.5%;
  left: 136%;

  border-radius: 0.5em;
}

#content2_19_node48 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 512.5%;
  left: 44%;

  border-radius: 0.5em;
}

#content2_19_coreEquip_1 {
  width: 15%;
  height: 30%;
  position: absolute;
  top: 475%;
  left: 92.5%;

  border-radius: 0.5em;
}

#content2_19_coreEquip_2 {
  width: 15%;
  height: 30%;
  position: absolute;
  top: 512.5%;
  left: 111.5%;

  border-radius: 0.5em;
}

#content2_19_coreEquip_3 {
  width: 15%;
  height: 30%;
  position: absolute;
  top: 512.5%;
  left: 73%;

  border-radius: 0.5em;
}

#content2_19_coreEquip_4 {
  width: 10%;
  height: 20%;
  position: absolute;
  top: 600%;
  left: 95%;

  border-radius: 0.5em;
}

#content2_19_coreItem_1 {
  width: 90%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_coreItem_2 {
  width: 90%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_coreItem_3 {
  width: 90%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_coreItem_4 {
  width: 90%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
}

#content2_19_treasureShow {
  z-index: 9;
  height: 10%;
  position: absolute;
  bottom: 3%;
  right: 1%;
}

#content2_19_treasureSel {
  position: sticky;
  top: 64%;
  width: 100%;
  height: 30%;
  z-index: 8;

  right: 0%;
}


#content2_19_treasureGrid {
  display: grid;
  width: 50%;
  height: 100%;
  bottom: 0%;
  overflow-y: auto;
  position: absolute;
  border-radius: 0.5em;
  gap: 0.5vw;

  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(20, 1fr) !important;

  left: 50%;
  transform: translate(-50%, 0);
}

#content2_19_treasureGrid::-webkit-scrollbar {
  width: 2vw;
}

#content2_19_treasureGrid::-webkit-scrollbar-track {
  background: #222;
  border-radius: 0.5em;
}

#content2_19_treasureGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.5em;
}

#content2_19_treasureGrid::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}


#content2_19_treasureGrid>* {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#content2_19_treasure_info {
  position: sticky;
  left: 0%;
  width: 25%;
  height: 100%;
  z-index: 9999;
}




#content2_21 {
  position: relative;

  background-color: #2c2f3a;
  overflow: none;
}


#content2_21_size {
  transform: scale(1);
}

#content2_21_limit1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

#content2_21_limit2 {
  position: absolute;
  top: 0%;
  left: 299%;
}

#content2_21_limit3 {
  position: absolute;
  top: 700%;
  left: 0%;
}

#content2_21_limit4 {
  position: absolute;
  top: 700%;
  left: 299%;
}

svg#content2_21_lineLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

#content2_21_menu {
  position: sticky;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 9999;

  display: flex;
  justify-content: left;

  pointer-events: none;
}

#content2_21_menu>* {
  margin: 1%;
  pointer-events: auto;
}

#content2_21_valutes_content {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: min-content; 
  width: 70%;
}

#content2_21_valutes_content > * {
  pointer-events: all;
  width: 100%; 
  background-color: rgba(90, 99, 99, 0.8);
}

#content2_21_zone1 {
  width: 46%;
  height: 70%;
  position: absolute;
  top: 255%;
  left: 48%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone2 {
  width: 46%;
  height: 70%;
  position: absolute;
  top: 255%;
  left: 94%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone3 {
  width: 46%;
  height: 70%;
  position: absolute;
  top: 255%;
  left: 140%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone4 {
  width: 46%;
  height: 110%;
  position: absolute;
  top: 140%;
  left: 48%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone5 {
  width: 46%;
  height: 110%;
  position: absolute;
  top: 140%;
  left: 94%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone6 {
  width: 46%;
  height: 90%;
  position: absolute;
  top: 160%;
  left: 140.5%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone7 {
  width:44.5%;
  height: 80%;
  position: absolute;
  top: 170%;
  left: 3%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}

#content2_21_zone8 {
  width:70%;
  height: 80%;
  position: absolute;
  top: 170%;
  left: 187%;

  border-radius: 0.5em;

  border: 5px dashed rgb(42, 144, 151);
  z-index: -10;

}


#content2_21_treasureShow {
  z-index: 9;
  height: 10%;
  position: absolute;
  bottom: 3%;
  right: 1%;
}

#content2_21_treasureSel {
  position: sticky;
  top: 64%;
  width: 100%;
  height: 30%;
  z-index: 8;

  right: 0%;
}


#content2_21_treasureGrid {
  display: grid;
  width: 50%;
  height: 100%;
  bottom: 0%;
  overflow-y: auto;
  position: absolute;
  border-radius: 0.5em;
  gap: 0.5vw;

  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(20, 1fr) !important;

  left: 50%;
  transform: translate(-50%, 0);
}

#content2_21_treasureGrid::-webkit-scrollbar {
  width: 2vw;
}

#content2_21_treasureGrid::-webkit-scrollbar-track {
  background: #222;
  border-radius: 0.5em;
}

#content2_21_treasureGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.5em;
}

#content2_21_treasureGrid::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}


#content2_21_treasureGrid>* {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#content2_21_treasure_info {
  position: sticky;
  left: 0%;
  width: 25%;
  height: 100%;
  z-index: 9999;
}

#content2_21_node1 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 119%;
  border-radius: 0.5em;
}

#content2_21_node2 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node3 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node4 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 119%;
  border-radius: 0.5em;
}

#content2_21_node5 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 142%;
  border-radius: 0.5em;
}

#content2_21_node6 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 165%;
  border-radius: 0.5em;
}

#content2_21_node7 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 142%;
  border-radius: 0.5em;
}

#content2_21_node8 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 165%;
  border-radius: 0.5em;
}

#content2_21_node9 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 50%;
  border-radius: 0.5em;
}

#content2_21_node10 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 300%;
  left: 73%;
  border-radius: 0.5em;
}

#content2_21_node11 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 50%;
  border-radius: 0.5em;
}

#content2_21_node12 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 275%;
  left: 73%;
  border-radius: 0.5em;
}

#content2_21_node13 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node14 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node15 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node16 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 150%;
  left: 96%;
  border-radius: 0.5em;
}

#content2_21_node17 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 142%;
  border-radius: 0.5em;
}

#content2_21_node18 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 153.5%;
  border-radius: 0.5em;
}

#content2_21_node19 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 142%;
  border-radius: 0.5em;
}

#content2_21_node20 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 165%;
  border-radius: 0.5em;
}

#content2_21_node21 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 27%;
  border-radius: 0.5em;
}

#content2_21_node22 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 4%;
  border-radius: 0.5em;
}

#content2_21_node23 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 27%;
  border-radius: 0.5em;
}

#content2_21_node24 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 27%;
  border-radius: 0.5em;
}

#content2_21_node25 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 211%;
  border-radius: 0.5em;
}

#content2_21_node26 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 234%;
  border-radius: 0.5em;
}

#content2_21_node27 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 188%;
  border-radius: 0.5em;
}

#content2_21_node28 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 234%;
  border-radius: 0.5em;
}

#content2_21_node29 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 211%;
  border-radius: 0.5em;
}

#content2_21_node30 {
  width: 43%;
  height: 45%;
  position: absolute;
  top: 200%;
  left: 50%;
  border-radius: 0.5em;
}

#content2_21_node31 {
  width: 43%;
  height: 45%;
  position: absolute;
  top: 150%;
  left: 50%;
  border-radius: 0.5em;
}

#content2_21_node32 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 119%;
  border-radius: 0.5em;
}

#content2_21_node33 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 200%;
  left: 119%;
  border-radius: 0.5em;
}

#content2_21_node34 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 175%;
  left: 119%;
  border-radius: 0.5em;
}

#content2_21_node35 {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 225%;
  left: 165%;
  border-radius: 0.5em;
}

#content2_21_under1 {
  width: 140%;
  height: 80%;
  position: absolute;
  top: 460%;
  left: 48%;
  border-radius: 0.5em;
}

#content2_21_under1_desc {
  width: 140%;
  height: 10%;
  position: absolute;
  top: 450%;
  left: 48%;
  border-radius: 0.5em;
}

#content2_21_under2 {
  width: 140%;
  height: 80%;
  position: absolute;
  top: 540%;
  left: 48%;
  border-radius: 0.5em;
}

#content2_21_under2_desc {
  width: 140%;
  height: 10%;
  position: absolute;
  top: 450%;
  left: 48%;
  border-radius: 0.5em;
}

#content2_21_tutorial {
  width: 40%;
  height: 20%;
  position: absolute;
  top: 329%;
  left: 96%;

  border-radius: 0.5em;
}

#content2_21_stats {
  width: 40%;
  height: 20%;
  position: absolute;
  top: 421%;
  left: 96%;

  border-radius: 0.5em;
}


#content2_21_army {
  width: 40%;
  height: 70%;
  position: absolute;
  top: 350%;
  left: 96%;

  border-radius: 0.5em;
}

#content2_21_armyLoadout {
  width: 10%;
  height: 70%;
  position: absolute;
  top: 350%;
  left: 137%;

  border-radius: 0.5em;
}

#content2_21_army2 {
  width: 37%;
  height: 70%;
  position: absolute;
  top: 350%;
  left: 148%;

  border-radius: 0.5em;
}

#content2_21_armyTreasures {
  width: 37%;
  height: 70%;
  position: absolute;
  top: 350%;
  left: 186%;

  border-radius: 0.5em;
}




#content2_23 {
  position: relative;

  background-color: #2c2f3a;
  overflow: none;
}

#content2_23_size {
  transform: scale(1);
}

#content2_23_limit1 {
  position: absolute;
  top: 400%;
  left: -50%;
}

#content2_23_limit2 {
  position: absolute;
  top: 400%;
  left: 550%;
}

#content2_23_limit3 {
  position: absolute;
  top: 1600%;
  left: -50%;
}

#content2_23_limit4 {
  position: absolute;
  top: 1600%;
  left: 550%;
}

#content2_23_treasureClaimButton {
  z-index: 9;
  height: 10%;
  position: absolute;
  bottom: 13%;
  right: 1%;
}

#content2_23_treasureShow {
  z-index: 9;
  height: 10%;
  position: absolute;
  bottom: 3%;
  right: 1%;
}

#content2_23_treasureSel {
  position: sticky;
  top: 64%;
  width: 100%;
  height: 30%;
  z-index: 8;

  right: 0%;
}


#content2_23_treasureGrid {
  display: grid;
  width: 50%;
  height: 100%;
  bottom: 0%;
  overflow-y: auto;
  position: absolute;
  border-radius: 0.5em;
  gap: 0.5vw;

  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(20, 1fr) !important;

  left: 50%;
  transform: translate(-50%, 0);
}

#content2_23_treasureGrid::-webkit-scrollbar {
  width: 2vw;
}

#content2_23_treasureGrid::-webkit-scrollbar-track {
  background: #222;
  border-radius: 0.5em;
}

#content2_23_treasureGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.5em;
}

#content2_23_treasureGrid::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}


#content2_23_treasureGrid>* {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#content2_23_treasure_info {
  position: sticky;
  left: 0%;
  width: 25%;
  height: 100%;
  z-index: 9999;
}

#content2_23_node1 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1010%;
  left: 245%;
  border-radius: 0.5em;
}

#content2_23_node2 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1065%;
  left: 285%;
  border-radius: 0.5em;
}

#content2_23_node3 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1310%;
  left: 250%;
  border-radius: 0.5em;
}

#content2_23_node4 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1185%;
  left: 310%;
  border-radius: 0.5em;
}

#content2_23_node5 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1075%;
  left: 355%;
  border-radius: 0.5em;
}

#content2_23_node6 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1073%;
  left: 205%;
  border-radius: 0.5em;
}

#content2_23_node7 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1150%;
  left: 245%;
  border-radius: 0.5em;
}

#content2_23_node8 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1065%;
  left: 140%;
  border-radius: 0.5em;
}

#content2_23_node9 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 985%;
  left: 195%;
  border-radius: 0.5em;
}

#content2_23_node10 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 980%;
  left: 300%;
  border-radius: 0.5em;
}

#content2_23_node11 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1180%;
  left: 200%;
  border-radius: 0.5em;
}

#content2_23_node12 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1325%;
  left: 180%;
  border-radius: 0.5em;
}

#content2_23_node13 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 810%;
  left: 315%;
  border-radius: 0.5em;
}

#content2_23_node14 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 940%;
  left: 380%;
  border-radius: 0.5em;
}

#content2_23_node15 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 710%;
  left: 380%;
  border-radius: 0.5em;
}

#content2_23_node16 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 650%;
  left: 310%;
  border-radius: 0.5em;
}

#content2_23_node17 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 600%;
  left: 377%;
  border-radius: 0.5em;
}

#content2_23_node18 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 630%;
  left: 440%;
  border-radius: 0.5em;
}

#content2_23_node19 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1080%;
  left: 430%;
  border-radius: 0.5em;
}

#content2_23_node20 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 1200%;
  left: 110%;
  border-radius: 0.5em;
}

#content2_23_node21 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 530%;
  left: 500%;
  border-radius: 0.5em;
}

#content2_23_node22 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 460%;
  left: 445%;
  border-radius: 0.5em;
}

#content2_23_node23 {
  width: 20%;
  height: 40%;
  position: absolute;
  top: 810%;
  left: 175%;
  border-radius: 0.5em;
}

#content2_23_background {
  width: 1800%;
  height: 1800%;
  position: absolute;
  top: -160%;
  left: -625%;
  border-radius: 0.5em;
  background-image: url("images/wind islands 3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#content2_23_spire1 {
  width: 15%;
  height: 20%;
  position: absolute;
  top: 1020%;
  left: 275%;
  border-radius: 0.5em;
}

#content2_23_spire1Image {
  width: 60%;
  height: 80%;
  position: absolute;
  top: 955%;
  left: 254%;
  background-image: url("images/spire1.png");
  background-color: transparent;
  border-radius: 0.5em;
}

#content2_23_spire2 {
  width: 15%;
  height: 20%;
  position: absolute;
  top: 1190%;
  left: 275%;
  border-radius: 0.5em;
}

#content2_23_spire2Image {
  width: 60%;
  height: 80%;
  position: absolute;
  top: 1125%;
  left: 254%;
  background-image: url("images/spire2.png");
  background-color: transparent;
}

#content2_23_spire3 {
  width: 15%;
  height: 20%;
  position: absolute;
  top: 865%;
  left: 156%;
  border-radius: 0.5em;
}

#content2_23_spire3Image {
  width: 60%;
  height: 80%;
  position: absolute;
  top: 800%;
  left: 135%;
  background-image: url("images/spire3.png");
  background-color: transparent;
}

#content2_23_menu {
  position: sticky;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 9999;

  display: flex;
  justify-content: left;

  pointer-events: none;
}

#content2_23_menu>* {
  margin: 1%;
  pointer-events: auto;
}

#content2_23_valutes_content {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: min-content; 
  width: 70%;
}

#content2_23_valutes_content > * {
  pointer-events: all;
  width: 100%; 
  background-color: rgba(90, 99, 99, 0.8);
}

#content2_25_menu {
  position: sticky;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 9999;

  display: flex;
  justify-content: left;

  pointer-events: none;
}

#content2_25_menu>* {
  margin: 1%;
  pointer-events: auto;
}

#content2_25_valutes_content {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: min-content; 
  width: 70%;
}

#content2_25_valutes_content > * {
  pointer-events: all;
  width: 100%; 
  background-color: rgba(90, 99, 99, 0.8);
}

#content2_25 {
  position: relative;

  background-color: #2c2f3a;
  overflow: none;
}


#content2_25_size {
  transform: scale(1);
}

#content2_25_limit1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

#content2_25_limit2 {
  position: absolute;
  top: 0%;
  left: 200%;
}

#content2_25_limit3 {
  position: absolute;
  top: 200%;
  left: 0%;
}

#content2_25_limit4 {
  position: absolute;
  top: 200%;
  left: 200%;
}

#content2_25_treasureShow {
  z-index: 9;
  height: 10%;
  position: absolute;
  bottom: 3%;
  right: 1%;
}

#content2_25_treasureSel {
  position: sticky;
  top: 64%;
  width: 100%;
  height: 30%;
  z-index: 8;

  right: 0%;
}


#content2_25_treasureGrid {
  display: grid;
  width: 50%;
  height: 100%;
  bottom: 0%;
  overflow-y: auto;
  position: absolute;
  border-radius: 0.5em;
  gap: 0.5vw;

  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(20, 1fr) !important;

  left: 50%;
  transform: translate(-50%, 0);
}

#content2_25_treasureGrid::-webkit-scrollbar {
  width: 2vw;
}

#content2_25_treasureGrid::-webkit-scrollbar-track {
  background: #222;
  border-radius: 0.5em;
}

#content2_25_treasureGrid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.5em;
}

#content2_25_treasureGrid::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}


#content2_25_treasureGrid>* {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#content2_25_treasure_info {
  position: sticky;
  left: 0%;
  width: 25%;
  height: 100%;
  z-index: 9999;
}

#content2_25_treasureEquipment {
  width: 70%;
  height: 50%;
  position: absolute;
  top: 70%;
  left: 50%;

  border-radius: 0.5em;
}

#content2_25_treasureAugment {
  width: 70%;
  height: 30%;
  position: absolute;
  top: 122%;
  left: 50%;

  display: grid;
  grid-template-columns: 50% 50%;
  /* ogni colonna = 50% */
  grid-template-rows: 33.333% 33.333% 33.333%;
  /* ogni riga = 1/3 */

  border-radius: 0.5em;
}

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

.opaqueBackgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
}

.zIndex0 {
  z-index: 0;
}

.zIndex1 {
  z-index: 1;
}

.grid {
  display: grid;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Due colonne di uguale larghezza */
  grid-template-rows: repeat(2, auto);
  /* Due righe, altezza automatica */
  gap: 3%;
  /* Distanza tra gli elementi */
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Due colonne di uguale larghezza */
  grid-template-rows: repeat(2, auto);
  /* Due righe, altezza automatica */
  gap: 3%;
  /* Distanza tra gli elementi */
}

.square {
  aspect-ratio: 1/1;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
}

.flexGrow1 {
  flex-grow: 1;
}

.roundedEdges {
  border-radius: 0.5em;
}

.backgroundBlue2 {
  background-color: #5A7D97;
}

.backgroundBlue1 {
  background-color: #3C5770;
}

.backgroundBlue3 {
  background-color: #1A3E53;
}

.backgroundOrange1 {
  background-color: #977a5a;
}

.backgroundOrange2 {
  background-color: #70513c;
}

.backgroundOrange3 {
  background-color: #53341a;
}

.blue3 {
  box-shadow: inset 0 0 0 0.05vw #ffffff,
    0vw 0.3vw rgba(0, 0, 0, 0.7);
}

.inlineBlock {
  display: inline-block;
}

.flex {
  display: flex;
}

.zHigh {
  z-index: 9999;
}

.overflowX {
  overflow-x: auto;
  overflow: auto;
}

.flexShrinkZero {
  flex-shrink: 0;
}

.overflowY {
  overflow-y: auto;
}

.backgroundTransparent {
  background-color: transparent;
}

.fas.fa-star {
  color: gold;
}

.far.fa-star {
  color: lightgray;
}

#content2_23_expeditionPage {
  background-color: #2c2f3a;

  position: absolute;

  width: 80%;

  height: 80%;

  left: 10%;

  background-color: #20282e;

  z-index: 8;

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

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

}

#content2_23_crusadePage {
  background-color: #2c2f3a;

  position: absolute;

  width: 80%;

  height: 80%;

  left: 10%;

  background-color: #20282e;

  z-index: 8;

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

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

}

#content2_23_curtain {

  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_23_treasureClaim {

  top: 15%;
  left: 0;

  height: 85%;
  width: 100%;


  z-index: 10;

  position: absolute;

}

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

  z-index: 11;
}

#content2_21_armyFormation {

  height: 15%;
  width: 35%;
  position: absolute;
  top: 422%;
  left: 148%;
  border-radius: 0.5em;
}

#content2_21_armyFormationSel {
  position: absolute;
  display: grid;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
  gap: 0.5vw;
}

.gap05 {
  gap: 0.5vw;
}

#content2_25_treasureUpgrade {
  left: 50%;
  top: 20%;
  width: 70%;
  height: 40%;

  position: absolute;
}