@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&display=swap');

@media (max-width: 450px) {

/* Aggiungi animazioni di entrata */
@keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(30px); /* Traslazione orizzontale e verticale iniziale */
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(0); /* Posizione finale centrata */
    }
  }

  @keyframes fadeOutDown {
    0% {
      opacity: 1;
      transform: translateX(-50%) translateY(0); /* Traslazione orizzontale e verticale iniziale */
    }
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(30px); /* Posizione finale centrata */
    }
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: #7b60f233;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
  }
  
  .floating-bar {
    position: fixed;
    bottom: 5%;  /* Distanza dal fondo */
    left: 50%;
    transform: translateX(-50%);  /* Centra la barra orizzontalmente */
    background-color: #7B60F2;
    padding: 10px;
    display: flex;
    border-radius: 25px;
    justify-content: space-around;
    width: 300px;  /* Larghezza della barra */
   border: 4px solid black;
   z-index: 2;
  }
  
  .dietro {
    position: fixed;
    bottom: 4%;
    left: 51%;
    transform: translateX(-50%);
    background-color: black;
    justify-content: space-around;
    width: 300px;
    z-index: 1;
    height: 75px;
    border-radius: 25px;
  }
  
  
  .tab {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    padding-right: 125PX;
    padding-left: 125PX;
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .tab.clicked {
    transform: scale(0.8);
  }
 
  .tab.active{
    transform: scale(1.5);
  }
  

  
  i {
    font-size: 24px;  /* Dimensione delle icone */
  }
  
  

 /* Menù a comparsa */
 .menu {
    display: none; /* Nascondi il menù inizialmente */
    position: fixed; /* Posizione fissa */
    left: 50%;
    background-color: #7B60F2;
    width: 300px;
    bottom:-1%;
    margin-bottom: 160px;
    border: 4px solid black;
    justify-content: space-around;
    border-radius: 25px;
    z-index: 2; /* Messo a 2 per essere sopra .dietro2 */
    animation: fadeInUp 0.25s ease-out forwards; /* Animazione di entrata */
}

.dietro2 {
    position: fixed; /* Fissa l'elemento */
    display: none;
    left: 51%;
    bottom: -1%;
    background-color: black;
    width: 300px;
    border-radius: 25px;
    z-index: 1; /* Posizionato dietro */
    margin-bottom: 150px;
    height: 317.5px; 
    animation: fadeInUp 0.25s ease-out forwards; /* Animazione di entrata */

}

.menu.show, .dietro2.show {
    display: block;
  }

  .menu.hide, .dietro2.hide {
    animation: fadeOutDown 0.25s ease-out forwards;
}

  .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: "Lexend Mega", sans-serif;
    font-weight: bold;
  }
  
 
  .menu ul li {
    margin: 10px;
  }
  
  .menu ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
  }

  .nonott {
    display: none; /* Nascondi il messaggio di default */

}
.overflow-hidden {
  overflow: hidden;
  height: 100vh;
}


}

@media (min-width: 451px) {
  body {
    background-color: #7b60f233;
  }

  .content, .floating-bar, .dietro, .menu, .dietro2 {
      display: none; /* Nasconde il resto del contenuto */
  }
  .nonott {

      display: block; /* Mostra il messaggio per schermi più grandi di 425px */
      font-family: "Lexend Mega", sans-serif;;
      position: fixed;
      bottom: 50%;
      left:50%;
      transform: translateX(-50%) scale(150%); 
      
  }
}