input[type="radio"] {
    display: none;
  }

  details summary {
    list-style: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  /* Slideshow */
  .slideshow {
    width: 610px;
    height: 250px;
    overflow: hidden;
    position: relative;
    background-image: url("https://i.postimg.cc/MKMqjrJX/bg.png");
    background-size: cover;
    border-radius: 0;
    z-index: 3;
  }

  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 3;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    z-index: 3;
  }

  /* Mostra la slide selezionata */
  #slide1:checked~.slideshow .slide:nth-child(1),
  #slide2:checked~.slideshow .slide:nth-child(2),
  #slide3:checked~.slideshow .slide:nth-child(3),
  #slide4:checked~.slideshow .slide:nth-child(4) {
    opacity: 1;
  }

  /* Menu Alto */
  .menu-alto {
    width: 606px;
    height: 40px;
    background-color: #333;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    border: 2px solid transparent;
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    z-index: 3;
  }

  .menu-alto label {
    color: white;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s;
    font-size: 16px;
  }

  .menu-alto label:hover,
  #slide1:checked~.menu-alto label[for="slide1"],
  #slide2:checked~.menu-alto label[for="slide2"],
  #slide3:checked~.menu-alto label[for="slide3"],
  #slide4:checked~.menu-alto label[for="slide4"] {
    color: #fc0;
  }

  /* Contenitore Centrale */
  .contenitore {
    width: 610px;
    height: 475px;
    background-image: url("https://i.postimg.cc/MKMqjrJX/bg.png");
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }

  .content {
    display: none;
    width: 96%;
    height: 96%;
    padding: 10px;
    font-size: 12px;
    text-align: justify;
    background-color: #333;
    color: white;
    border-radius: 0;
    overflow: auto;
    z-index: 3;
  }

  /* Mostra il contenuto selezionato */
  #slide1:checked~.contenitore #content-project,
  #slide2:checked~.contenitore #content-kirameki-stars,
  #slide3:checked~.contenitore #content-eventi,
  #slide4:checked~.contenitore #content-off {
    display: block;
  }

  /* Menu Basso */
  .menu-basso {
    width: 576px;
    height: 30px;
    background-color: #333;
    padding: 15px;
    text-align: center;
    position: relative;
    border: 2px solid transparent;
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    top: -20px;
    z-index: 3;
  }

  .menu-basso a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin: 0 15px;
    transition: color 0.3s;
  }

  /* Menu GIF */
  .menu-gif {
    width: 610px;
    height: 200px;
    background-image: url("https://i.postimg.cc/MKMqjrJX/bg.png");
    position: relative;
    z-index: 3;
  }

  /* News Container */
  .news-container {
    width: 260px;
    height: 120px;
    border: 0px solid black;
    overflow: hidden;
    position: relative;
    left: 0;
    top: 55px;
    transform: translateX(20px) translateY(0);
    text-align: justify;
    z-index: 3;
  }

  .news-content {
    transform: translateY(100%);
    animation: my-animation 20s linear infinite;
    cursor: pointer;
    padding: 5px;
    font-size: 12px;
    z-index: 3;
  }

  .news-container:hover .news-content {
    animation-play-state: paused;
  }

  @keyframes my-animation {
    from {
      transform: translateY(50%);
    }

    to {
      transform: translateY(-100%);
    }
  }

  /* Stelle decorative */
  .stelline,
  .stelline2,
  .stelline3 {
    position: absolute;
    height: auto;
    opacity: 0.8;
    z-index: -1;
  }

  .stelline {
    top: 0;
    left: -70px;
    transform: rotate(235deg);
  }

  .stelline2 {
    top: -70px;
    left: 370px;
    transform: rotate(-50deg);
  }

  .stelline3 {
    top: -70px;
    left: 300px;
    transform: rotate(200deg);
  }

  /* Dettagli e pulsanti */
  .details-content {
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
  }

  .expand-btn {
    width: 160px;
    cursor: pointer;
  }

  details[open] .expand-btn {
    filter: brightness(50%);
  }

  /* Banner News */
  .news-banner {
    position: relative;
    top: -290px;
    left: 320px;
    border: 0px solid black;
    overflow: hidden;
    text-align: justify;
    z-index: 3;
  }

  h1 {
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 2px;
  }

  #arcobaleno {
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    border-image-slice: 1;
    margin-right: 10px;
  }


<!-- Input radio per la selezione delle slide -->
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<input type="radio" name="slide" id="slide4">

<!-- Slideshow -->
<div class="slideshow">
  <div class="slide">
    <img src="https://i.postimg.cc/FKYKFh0b/BANNER1.png" alt="welcome">
  </div>
  <div class="slide">
    <img src="https://i.postimg.cc/y8Yd5mdb/BANNER2.png" alt="IDOLS">
  </div>
  <div class="slide">
    <img src="https://i.postimg.cc/Wzh8K8Fc/banner3.png" alt="Eventi">
  </div>
  <div class="slide">
    <img src="https://i.postimg.cc/sDJxw6VW/banner4.png" alt="OFFZONE">
  </div>
</div>

<!-- Menu in Alto (ora sotto la slideshow) -->
<nav class="menu-alto">
  <label for="slide1">Kirameki Project</label>
  <label for="slide2">IDOLS ★</label>
  <label for="slide3">On Stage!</label>
  <label for="slide4">Info</label>
</nav>

<!-- Contenitore Centrale -->
<main class="contenitore">
  <div class="content" id="content-project">

    <h1>
      <font color="#ffcc00">The Idol's Agency</font>
      <hr>
    </h1>
    <center>
      <font color="#ffcc00">★</font>
      <font color="white"><i>Se il tuo sogno è emozionare, ispirare e lasciare un segno nel mondo dello spettacolo, sali sul palco e non attendere oltre! </i></font>
      <font color="#ffcc00">★</font>
    </center>
    <hr>
    <br>
    <p> <img src="https://i.postimg.cc/gYYb1HTV/stabile.png" style="float:left; width: 160px; height: auto; padding-right: 0px;" id="arcobaleno" alt="">
      La Kirameki Project (Progetto Scintillante) - キラメキプロジェクト ha sede nel cuore del centro cittadino di Tohei, precisamente all'incrocio Hashimoto, e si dedica alla scoperta e alla crescita di talenti, offrendo loro l'opportunità di:<br>

      <br>
      <font color="#ffcc00">★</font> Esibirsi dal vivo
      <br>
      <font color="#ffcc00">★</font> Registrare, produrre e rilasciare brani originali
      <br>
      <font color="#ffcc00">★</font> Sviluppare la propria immagine
      <br>
      <font color="#ffcc00">★</font> Connettersi con i fan
      <br><br>
      Crediamo che un vero artista non sia solo un talento sul palco o nel web, ma qualcuno capace di creare un legame autentico con il pubblico, rendendo ogni esibizione speciale e indimenticabile nella memoria e nel cuore del pubblico e per farlo è necessario dare anche ai fan la possibilità di essere parte attiva di questo progetto scintillante, attraverso:<br>
      <br>
      <font color="#ffcc00">★</font> Incontri dal vivo
      <br>
      <font color="#ffcc00">★</font> Live streaming
      <br>
      <font color="#ffcc00">★</font> Iniziative speciali, Meet&Greet, concerti
    </p>
    <br><br><br>
    <h1>
      <font color="#ffcc00">La sede</font>
      <hr>
    </h1>
    <center>
      <font color="#ffcc00">★</font>
      <font color="white"><i>Il cuore pulsante dove talento, passione e determinazione si trasformano in arte e musica. Ogni spazio è pensato per offrire ai nostri IDOL il massimo supporto nel loro percorso di crescita.</i></font>
      <font color="#ffcc00">★</font>
    </center>
    <hr>
    <br>
    <p>
    <div style="display: flex; align-items: flex-start;">
      <!-- Colonna di Immagini -->
      <div style="display: flex; flex-direction: column; margin-right: 0px;">
        <img src="https://i.postimg.cc/HLh9gtND/record.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/2STxHYF5/music.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/8zTHBcv3/dance.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/vHrhVf4f/store.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
      </div>

      <!-- Testo a destra delle immagini -->
      <div style="flex: 1;">
        <p>
          <font color="#ffcc00">Sala di Registrazione</font><br>
          Un ambiente professionale per la registrazione di singoli e album. Grazie a microfoni di alta qualità, cabine insonorizzate e un team di produttori esperti, ogni traccia viene perfezionata per catturare l’essenza unica di ogni voce.
          <br><br>
          <font color="#ffcc00">Sala Prove</font><br>
          Uno spazio versatile dove gli IDOL affinano le loro performance vocali e artistiche. Dotata di specchi, impianto audio professionale, pareti insonorizzate e attrezzature per la musica dal vivo, questa sala è il laboratorio creativo dove nascono le esibizioni che emozionano il pubblico.
          <br><br>
          <font color="#ffcc00">Sala di Danza</font><br>
          Un'ampia sala con pavimentazione ammortizzata e un impianto audio potente, progettata per perfezionare le coreografie e dare vita a performance coinvolgenti. Qui il corpo di ballo lavora insieme per creare accattivanti coreografie.
          <br><br>
          <font color="#ffcc00">Kirameki Shop</font><br>
          Un vero e proprio paradiso per gli appassionati, dove è possibile portare a casa un pezzo della magia della KiraPro. Il negozio offre una vasta selezione di CD, DVD, photobook, lightstick ufficiali, abbigliamento a tema e merchandise esclusivo autografato e in edizione limitata, perfetti per ogni fan.
        </p>
      </div>
    </div>
    </p>
  </div>

  <div class="content" id="content-kirameki-stars">
    <h1>
      <font color="#ffcc00">Kirameki Stars</font>
    </h1>
    <hr>
    <center>
      <font color="#ffcc00">★</font>
      <font color="white"><i>Scopri di più sulle nostre stelle più luminose. Gossip, curiosità e molto altro!</i>
      </font>
      <font color="#ffcc00">★</font>
    </center>
    <hr>
    <br>
    <details>
      <summary>
        <center><img src="https://i.postimg.cc/8kmMjvjn/aikaidolbanner.png" class="expand-btn" style="width: 160px; height: auto; margin-bottom: 10px;" alt="Clicca per espandere"></center>
      </summary>
      <br>
      <div style="display: flex; align-items: flex-start;">
        <!-- Colonna di Immagini -->
        <div style="display: flex; flex-direction: column; margin-right: 10px;">
          <img src="https://i.postimg.cc/QdDkYJ0x/aikaidol.png" style="width: 160px; height: auto; margin-bottom: 10px;" alt="">
        </div>

        <!-- Testo a destra delle immagini -->
        <div style="flex: 1;">
          <center>
            <br><i>
              <font color="violet">« Anche nei giorni più difficili, ricorda che io sarò sempre qui a tifare per te! Ganbatte! (੭˃ᴗ˂)੭ »</font>
            </i>
          </center>

          <br><br>
          <font color="#ffcc00"><strong>Età</strong></font><br>
          19
          <br><br>
          <font color="#ffcc00"><strong>Compleanno</strong></font><br>
          29/06
          <br><br>
          <font color="#ffcc00"><strong>Nazionalità</strong></font><br>
          Giapponese
          <br><br>
          <font color="#ffcc00"><strong>Debutto</strong></font>
          <ul style="list-style-type: disc; padding-left: 0px;">
            <li>18/10/2021 – Esordisce come IDOL con la R.P.P.</li>
            <li>14/12/2021 - Si afferma come Gravure Idol grazie al Paradise Kiss Atelier</li>
            <li>25/09/2024 – Conquista il palco dell’HARODOME con il concerto "BOUND", debuttando ufficialmente nel mondo J-POP con i suoi brani.</li>
          </ul>

          <br>
          <font color="#ffcc00"><strong>Tags</strong></font><br>
          #kawaii #waifu #bishojo #sexy #shy #superpositive #angel #j-pop #gravure #singer #otaku #cosplayer
          <br><br>
          <font color="#ffcc00"><strong>Voce</strong></font> <a href="https://od.lk/f/NTlfOTY2NTc4NTNf" target="_blank"> ▶︎ •၊၊||၊|။||||။‌‌‌‌‌၊|• 0:06</a>
          <br><br>
          <font color="#ffcc00"><strong>Curiosità & Gossip</strong></font><br>
          Le sue mutandine (usate) sono esclusiva del <a href="https://www.hikanoto.it/main.php?page=scheda_licenza&pg=Nico&lic=49" target="_blank"> Tōukuī</a>.
          <br><br>
          <font color="#ffcc00"><strong>Social e Fanclub</strong></font> <a href="https://www.hikanoto.it/main.php?page=forum&op=read&what=26297&where=35" target="_blank"> clicca qui</a>.
          <br><br>
          <font color="#ffcc00"><strong>Autografo ufficiale</strong></font><br>
          <img src="https://i.postimg.cc/SRqj3tZq/FIRMAAICCHI2.png" style="width: 160px; height: auto; margin-bottom: 10px;" alt="">
        </div>
      </div>
    </details>
    <center><br><br>...others coming soon!</center>
  </div>

  <div class="content" id="content-eventi">
    <h1>
      <font color="#ffcc00">Eventi & Concerti</font>
    </h1>
    <hr>
    <center>
      <font color="#ffcc00">★</font>
      <font color="white"><i>Non perderti nemmeno una occasione per incontrare i tuoi IDOL del cuore e dar loro supporto!</i>
      </font>
      <font color="#ffcc00">★</font>
    </center>
    <hr>
    <br>
    <p>
    <div style="display: flex; align-items: flex-start;">
      <!-- Colonna di Immagini -->
      <div style="display: flex; flex-direction: column; margin-right: 0px;">
        <img src="https://i.postimg.cc/3RgWnhZ9/stage1.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/hGQXQTzk/stage3.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/XNdSpDXn/palco3.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/xTQrHybM/palco.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
      </div>

      <!-- Testo a destra delle immagini -->
      <div style="flex: 1;">
        <p>
          <font color="#ffcc00">Underground Stage – Dove Inizia il Sogno</font>
          <br>
          È qui che ogni IDOL emergente ha l'opportunità di salire sul palco e mostrare il proprio talento. <br><br>Che si tratti di una performance da solista, con la propria band, o di una collaborazione tra IDOL, questo palco sarà la vostra vetrina. E per i Fan? Non sono necessari biglietti per assistere come spettatore, rendendo l’esperienza accessibile a tutti, favorendo quindi il contatto tra pubblico e artisti.
          <br><br>
          <font color="#ffcc00">Il Palco e il Parterre</font>
          <br>
          La KIRAPRO mette a disposizione tutta l’attrezzatura tecnica necessaria, ma gli artisti hanno la libertà di portare e utilizzare la propria, personalizzando il palco secondo le esigenze della loro performance.<br><br>
          <font color="#ffcc00">★</font> Fino a 500 spettatori in totale sicurezza.<br>
          <font color="#ffcc00">★</font> Sala insonorizzata per una acustica ottimale.<br>
          <font color="#ffcc00">★</font> Un piccolo, ma comodo, backstage con camerini per gli artisti.

          <br><br>
          <font color="#ffcc00">Le Kirameki STARS</font><br>
          Per chi ha già conquistato una buona fanbase e fa parte delle stelle della KIRAPRO, offriamo un supporto completo per la creazione di eventi ufficiali!<br><br> Questo include pubblicità personalizzata e vendita di gadget esclusivi per i fan.

        </p>
      </div>
    </div>
    </p>

  </div>

  <div class="content" id="content-off">
    <h1>
      <font color="#ffcc00">Spunti di Gioco</font>
    </h1>
    <hr>
    <center>
      <font color="#ffcc00">★</font>
      <font color="white"><i>Tutto quello che c'è da sapere per sfruttare al meglio lo spunto di gioco</i>
      </font>
      <font color="#ffcc00">★</font>
    </center>
    <hr>
    <br>
    <p>
    <div style="display: flex; align-items: flex-start;">
      <!-- Colonna di Immagini -->
      <div style="display: flex; flex-direction: column; margin-right: 0px;">
        <img src="https://i.postimg.cc/kGqGHH1C/fans.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/V6ydqvXd/backstage.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
        <img src="https://i.postimg.cc/wBzRsLfb/idols.png" style="width: 160px; height: auto; padding-right: 0px; margin-bottom: 10px;" id="arcobaleno" alt="">
      </div>

      <!-- Testo a destra delle immagini -->
      <div style="flex: 1;">
        <p>
          <font color="#ffcc00">IDOL, FAMA, WOTA, CONCERTI e il gioco di gruppo</font>
          <br>
          La KIRAMEKI PROJECT nasce con l’obiettivo di dare merito e visibilità a tutti coloro che scelgono di affrontare il percorso della fama, non solo per una soddisfazione personale, ma anche per espandere il proprio gioco attraverso tutte le sfumature che la stessa comporta.
          <br><br>
          Nel complesso cammino verso il successo, anche il supporto dei giocatori è fondamentale. Vorremo che la meccanica della fama non si limitasse solo all'OFF, ma si estendesse anche e soprattutto all'ON, creando vere opportunità di interazione.
          <br><br>
          La possibilità di interagire, condividere e supportarsi è una parte essenziale del tipo di gioco che vogliamo creare, riflettendo una cultura Giapponese che celebra il legame speciale tra fan e artisti.
          <br><br>
          Per FAQ e pipponi più dettagliati (se avete voglia di approfondire) potete cliccare QUI (coming soon)
        </p>
      </div>
    </div>
    </p>

  </div>

  <div class="stelline">
    <img src="https://i.postimg.cc/jjYpgsN4/Winter-Jouer-GIF-by-Corolle-unscreen2.gif" alt="Decorazione Stelle">
  </div>
  <div class="stelline2">
    <img src="https://i.postimg.cc/jjYpgsN4/Winter-Jouer-GIF-by-Corolle-unscreen2.gif" alt="Decorazione Stelle">
  </div>
</main>

<nav class="menu-gif">
  <div class="stelline3">
    <img src="https://i.postimg.cc/jjYpgsN4/Winter-Jouer-GIF-by-Corolle-unscreen2.gif" alt="Decorazione Stelle">
  </div>
  <img src="https://i.postimg.cc/JhX9DZpw/giphy222.gif" style="float:left; margin-left: 40px; margin-top: 10px;" alt="">

  <div class="news-container">
    <div class="news-content">

      <p>

        Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora! Inaugurazione, Nuove uscite, News, Eventi, Meet&Greet e molto altro ancora!<br>
      </p>

    </div>
  </div>
</nav>

<!-- Menù in Basso -->
<nav class="menu-basso">
  <a href="https://www.hikanoto.it/main.php?page=forum&op=read&what=62261&where=8"><img src="https://i.postimg.cc/zfx3DMxJ/favourite.png" title="Seguici sui Social" alt=""></a>
  <a href="https://www.hikanoto.it/main.php?page=messages_center&newmessage=yes&reply_dest=Aika" target="_blank"><img src="https://i.postimg.cc/9Mz0Dpky/email-marketing.png" title="Contattaci" alt=""></a>
  <a href="https://www.hikanoto.it/main.php?page=scheda_licenza_oggetti&pg=Aika&lic=51" target="_blank"><img src="https://i.postimg.cc/1tTtwFx2/buy-button.png" title="Vai al Negozio" alt=""></a>
</nav>
<div class="news-banner">
  <img src="https://i.postimg.cc/rmX3TsC8/NEWS.png" alt="">
</div>