html, body {
    height: 100%; /* Impostiamo l'altezza a 100% per occupare tutta la finestra */
    margin: 0; /* Rimuove i margini di default */
  }
  
  body {
    margin: 0;
  padding: 0;
    display: flex;
    flex-direction: column; /* Dispone gli elementi in colonna (verticale) */
    min-height: 100vh; /* Impedisce che il footer si sovrapponga al contenuto */
    
    /*Serve per i colori visibili all'interno della pagina*/
    font-family: Arial, sans-serif;
  text-align: center;
  }
  
  .content {
    flex: 1; /* Fa in modo che il contenuto occupi tutto lo spazio disponibile */
  }










  .site-footer {
    background-color: #222; /* Colore di sfondo */
    color: #eee; /* Colore del testo */
    padding: 30px 20px; /* Padding per distanziare il contenuto */
    text-align: center; /* Allinea il testo al centro */
    font-family: Arial, sans-serif; /* Font */
  }
  
  .footer-content {
    max-width: 1000px; /* Imposta una larghezza massima */
    margin: auto; /* Centra il footer */
    
  }
  
  .social-icons {
    margin-top: 15px; /* Spazio tra il testo e le icone */
  }
  
  .social-icons a {
    color: #40b8cd; /* Colore iniziale delle icone */
    margin: 5px; /* Spaziatura tra le icone */
    font-size: 35px; /* Dimensione delle icone */
    text-decoration: none; /* Rimuove la sottolineatura */
    transition: color 0.3s; /* Transizione per l'effetto hover */
  }
  
  .social-icons a:hover {
    color: #4c939e; /* Colore delle icone al passaggio del mouse */
  }


/*menu*/

nav{
    font-size: 20px;
}

nav ul{
    list-style-type: none;
   margin: 0;
    
}

nav li a {
    text-decoration: none;
    color: black;
}

nav li{
    display: inline-block;
    padding: 15px;
}

nav li:hover{
    background-color: rgb(156, 221, 245);
}
























/*le icone in alto a destra*/
.icons {
    margin-top: 15px; /* Spazio tra il testo e le icone */
  }
  
  .icons a {
    color: #40b8cd; /* Colore iniziale delle icone */
    margin: 5px; /* Spaziatura tra le icone */
    font-size: 30px; /* Dimensione delle icone */
    text-decoration: none; /* Rimuove la sottolineatura */
    transition: color 0.3s; /* Transizione per l'effetto hover */
  }
  
  .icons a:hover {
    color: #4c939e; /* Colore delle icone al passaggio del mouse */
  }
















/* Logo centrale */

/* Contenitore principale */
.logo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  /* Testo sopra il logo */
  .logo-top-text {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #4db8ff;
    margin-bottom: 20px; /* spazio tra testo e logo */
    text-shadow: 0 0 5px #4db8ff, 0 0 10px #66ccff;
  }
  
  /* Logo centrale (come prima) */
  .logo-centrale {
    font-family: 'Arial', sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #4db8ff;
    text-shadow:
      0 0 5px #4db8ff,
      0 0 10px #4db8ff,
      0 0 20px #4db8ff,
      0 0 40px #66ccff,
      0 0 80px #66ccff;
    animation: pulse 2s infinite alternate;
  }
  
  .logo-centrale span {
    color: #66ccff;
    text-shadow:
      0 0 5px #66ccff,
      0 0 10px #66ccff,
      0 0 20px #66ccff,
      0 0 40px #66ccff,
      0 0 80px #66ccff;
  }
  
  /* Animazione pulsante */
  @keyframes pulse {
    0% {
      text-shadow:
        0 0 5px #4db8ff,
        0 0 10px #4db8ff,
        0 0 20px #4db8ff,
        0 0 40px #66ccff,
        0 0 80px #66ccff;
    }
    50% {
      text-shadow:
        0 0 10px #4db8ff,
        0 0 20px #4db8ff,
        0 0 30px #4db8ff,
        0 0 50px #66ccff,
        0 0 100px #66ccff;
    }
    100% {
      text-shadow:
        0 0 5px #4db8ff,
        0 0 10px #4db8ff,
        0 0 20px #4db8ff,
        0 0 40px #66ccff,
        0 0 80px #66ccff;
    }
  }
  









  /* HEADER */
  .header-bello {
    background: linear-gradient(90deg, #4db8ff, #66ccff);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    font-family: 'Arial', sans-serif;
  }
  
  .header-text {
    font-size: 32px; /* più grande */
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    
    /* animazione scorrimento tipo marquee */
    position: absolute;
    animation: slideText 10s linear infinite;
  }
  
  .header-text span {
    color: #3c60ef; /* colore diverso per “Techno Green” */
    text-shadow: 0 0 10px #3e4fec, 0 0 20px #4db8ff;
  }
  
  /* Animazione scorrimento da destra a sinistra */
  @keyframes slideText {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }