html,
body,
main {
  font-family: 'Roboto Mono', monospace; /* Imposta il font per l'intera pagina */
  height: 100%; /* Imposta l'altezza al 100% per riempire tutta la viewport */
  margin: 0; /* Rimuove i margini predefiniti */
}
html,
body,
main,
div,
button {
  box-sizing: border-box; /* Include il padding nelle dimensioni totali per evitare overflow */
}

#container {
  width: 100%; /* Il container occupa tutta la larghezza disponibile */
  height: 100%; /* Il container occupa tutta l'altezza disponibile */
  position: relative; /* Posizione relativa per permettere il posizionamento assoluto degli elementi figli */
}

#centered {
  position: absolute; /* Posiziona il div in modo assoluto rispetto al container */
  top: 50%; /* Sposta il div verso il 50% dall'alto del container */
  left: 50%; /* Sposta il div verso il 50% da sinistra del container */
  transform: translate(
    -50%,
    -50%
  ); /* Centra il div esattamente rispetto al suo punto di riferimento */
  text-align: center; /* Allinea il testo al centro orizzontalmente */
  display: flex; /* Usa Flexbox per disporre gli elementi figli */
  flex-direction: column; /* Disposizione verticale degli elementi figli */
  justify-content: space-between; /* Spaziatura equidistante tra gli elementi figli */
  align-items: center; /* Allinea gli elementi figli al centro orizzontalmente */
  height: 500px; /* Altezza fissa per gestire lo spazio verticale */
  width: 90%; /* Occupa il 90% della larghezza disponibile */
  max-width: 550px; /* Limita la larghezza massima a 550px */
}

#phrase {
  height: 70%; /* Imposta l'altezza del div "phrase" al 70% del suo contenitore */
  text-align: left; /* Allinea il testo a sinistra */
  font-size: 3rem; /* Imposta la dimensione del testo */
  font-weight: bold; /* Imposta il testo in grassetto */
}

#button {
  width: 100%; /* Occupa tutta la larghezza del contenitore */
  height: 30%; /* Altezza pari al 30% del contenitore */
  display: flex; /* Usa Flexbox per disporre il contenuto */
  align-items: center; /* Centra il contenuto verticalmente */
  justify-content: center; /* Centra il contenuto orizzontalmente */
}

#switch {
  width: 10rem; /* Larghezza del bottone switch */
  height: 5rem; /* Altezza del bottone switch */
  border-radius: 0.5rem; /* Angoli leggermente arrotondati */
  background-color: hsl(115, 100%, 50%); /* Colore di sfondo verde brillante */
  font-weight: bold; /* Testo in grassetto */
}

#message {
  width: 90%; /* Il div si adatta al 90% della larghezza della finestra */
  max-width: 600px; /* Larghezza massima per evitare che diventi troppo largo */
  min-width: 200px; /* Larghezza minima per evitare che diventi troppo stretto */
  position: fixed; /* Fissa il div al fondo della finestra */
  bottom: 0; /* Aggancia il div al bordo inferiore della pagina */
  left: 50%; /* Posiziona il centro del div a metà finestra */
  transform: translateX(
    -50%
  ); /* Centra esattamente il div rispetto alla larghezza della pagina */
  text-align: center; /* Allinea il testo al centro */
  padding: 10px; /* Aggiunge uno spazio interno di 10px */
}

/* Da qua in poi vengono gestiti gli stili dei caratteri avendo
chiaramente definito la posizione degli oggetti */

.green {
  color: hsl(115, 100%, 50%); /* Colore del testo verde brillante */
}
.white {
  color: white;
}

#clickMilestone {
  margin: 0 auto;
  text-align: center;
  font-size: 7rem;
}

#totalMilestones {
  text-align: center;
  margin: 1rem;
  font-size: 2rem;
}

.containerClickMilestone {
  background: rgb(209, 0, 255);
  background: linear-gradient(
    176deg,
    rgba(209, 0, 255, 1) 0%,
    rgba(0, 0, 125, 1) 100%
  );
}

@media (max-width: 600px) {
  #phrase {
    font-size: 2.5rem; /* Riduce la dimensione del font se la larghezza della finestra è inferiore a 600px */
  }
  #clickMilestone {
    font-size: 4rem;
  }
}

@media (max-width: 400px) {
  #phrase {
    font-size: 2rem; /* Riduce ulteriormente la dimensione del font se la larghezza della finestra è inferiore a 400px */
  }
}