body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Mynerve', cursive;
      overflow-x: hidden;
      background: linear-gradient(135deg, rgba(26, 0, 51, 0.7), rgba(51, 0, 102, 0.7), rgba(102, 0, 204, 0.7), rgba(204, 0, 255, 0.7)), url('https://i.postimg.cc/kXdzSZqs/Sfondo.png');
      background-size: cover, 400% 400%;
      background-attachment: fixed;
      animation: psychedelicBg 60s ease infinite;
      color: #fff;
      scroll-behavior: smooth;
    }

    section {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: auto;
      position: relative;
      z-index: 2;
    }

    h2 {
      color: orange;
      font-size: calc(2.5rem + 5px);
      margin-bottom: 0.2rem;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .card {
      background: rgba(0, 0, 0, 0.7);
      padding: 1.5rem;
      border-radius: 12px;
      border-left: 5px solid #ff00cc;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 0 30px #ff00ccaa, 0 0 60px #cc00ffaa;
    }

    .cta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      width: 100%;
      margin-top: 1rem;
    }

    .cta a {
      background: #ff00cc;
      color: #fff;
      padding: 1rem 2rem;
      text-decoration: none;
      border-radius: 8px;
      display: inline-block;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 0 10px #ff00cc80;
    }

    .cta a:hover {
      background: #cc00ff;
      transform: scale(1.05);
      box-shadow: 0 0 25px #ff00ccaa, 0 0 45px #cc00ffaa;
    }

    footer {
      background: #000;
      text-align: center;
      padding: 3rem 1rem;
      font-size: clamp(0.8rem, 1.5vw, calc(0.9rem + 9px));
      color: #aaa;
    }

    .hero-box {
      max-width: 700px;
      width: 100%;
      margin: 0 auto;
      padding: 2rem;
      padding-left: clamp(1rem, 5vw, 4rem);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      transform: translateX(-5%);
    }

    .hero-banner {
      background: url('https://i.postimg.cc/GmmZcGkK/IMG-6945.png') no-repeat center center / cover;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 2rem 1rem;
    }

    .bg-gif img {
      position: absolute;
      width: clamp(80px, 10vw, 200px);
      opacity: 0.3;
      animation: float 20s infinite ease-in-out;
    }

    .gif1 { top: 10%; left: 5%; }
    .gif2 { top: 30%; left: 70%; animation-delay: 3s; }
    .gif3 { top: 60%; left: 5%; animation-delay: 6s; }
    .gif4 { top: 80%; left: 80%; animation-delay: 9s; }
    .gif5 { top: 45%; left: 40%; animation-delay: 12s; }
    .gif6 { top: 15%; left: 85%; animation-delay: 15s; }

    @keyframes psychedelicBg {
      0% { background-position: center center, 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .hero-box {
        transform: none;
        padding-left: 1rem;
        align-items: center;
        text-align: center;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      .bg-gif,
      .floating-phrase {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      .hero-box {
        padding: 1rem;
      }

      .card {
        font-size: clamp(0.9rem, 4vw, 1rem);
        padding: 1rem;
      }

      h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
      }

      p {
        font-size: clamp(1rem, 4vw, 1.2rem);
      }
    }

    .hallucination-active { 
 filter: hue-rotate(180deg);
} 

.spore {
  position: fixed;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  animation: fadeOut 1s forwards;
}


@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@media (max-width: 768px) {
  .cta {
    justify-content: center;
  }
}

* {
  box-sizing: border-box;
}

#hallucination-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10001;
  background: #ff00cc;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px #cc00ff;
  cursor: pointer;
  font-family: 'Mynerve', cursive;
  max-width: 90vw; /* ✅ PREVENT overflow */
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}