/* Keyframes per l'animazione del gradiente di sfondo */
@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Contenitore con animazione del gradiente */
  .gradient-background {
    /* Imposta il gradiente iniziale e aggiungi più colori se necessario */
    background: linear-gradient(270deg, #662790, #a24884, #6355a7);
    background-size: 600% 600%;
  
    /* Specifica il nome dell'animazione, la durata, il timing e il loop */
    animation: gradient 20s ease infinite;
  
    /* Posizione e dimensioni del contenitore */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Mantiene il gradiente di sfondo dietro il contenuto */
  }
  
  /* Stile per particles-js per assicurarsi che riempia il contenitore */
  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
  } 

  .logo {
    max-width: 150px; /* o la dimensione che preferisci */
    height: auto; /* mantiene il rapporto aspetto dell'immagine */
    position: relative; /* Rende l'elemento relativo al suo posizionamento normale */
    top: 20px;
    left: 20px;  
    padding: 0px; /* Aggiunge un po' di spazio intorno al logo */
    z-index: 10; /* Assicura che il logo sia sopra le particelle */
  }

  /* Container per lo scroll snapping */
  .snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
  }

/* Sezioni che si agganciano */
  .snap-section {
    scroll-snap-align: start;
    height: 100vh;
  }

  /*cursore personalizzato*/
  .typed-cursor {
    color: #ffffff; /* Colore del cursore */
    animation: blink 0.7s infinite;
    font-size: 60px;
    display: inline;
   /* border-right: 2px solid white; /* Stile del bordo che funge da cursore */
  }
  
  @keyframes blink {
    50% { opacity: 0; }
  }