Add audio tracks and enhance character sections in index.html; update styles for footer links

index.html

@@ -18,7 +18,68 @@
       <h2>Welcome, traveler...</h2>
       <p>
         Step into the world of Ulud and Arcaena, two adventurers whose stories
-        weave through danger, magic, and mystery. Scroll down to meet them.
+        weave through danger, magic, and mystery. 
+      </p>
+      <div class="music-player">
+        <h3>DungeonSynth Playlist</h3>
+        <audio id="dungeonSynthPlayer" controls>
+          <source src="audio/DungeonSynth/Cathedral of Glistening Hope [QfJ5F_Negow].mp3" type="audio/mpeg">
+          <source src="audio/DungeonSynth/Fief - Dawnlight Warms the Castle Stone [oK83HqN7sgI].mp3" type="audio/mpeg">
+          <source src="audio/DungeonSynth/Hermodr A Helferd [jPJVG0n0EPE].mp3" type="audio/mpeg">
+          <source src="audio/DungeonSynth/With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars [V8JZ3KDn1g4].mp3" type="audio/mpeg">
+          Your browser does not support the audio element.
+        </audio>
+        <div>
+          <button onclick="prevTrack()">Prev</button>
+          <button onclick="nextTrack()">Next</button>
+          <span id="dsTrackName"></span>
+        </div>
+      </div>
+      <script>
+        // List your DungeonSynth tracks here
+        const dsTracks = [
+          {src: "audio/DungeonSynth/Cathedral of Glistening Hope [QfJ5F_Negow].mp3", name: "Cathedral of Glistening Hope"},
+          {src: "audio/DungeonSynth/Fief - Dawnlight Warms the Castle Stone [oK83HqN7sgI].mp3", name: "Fief - Dawnlight Warms the Castle Stone"},
+          {src: "audio/DungeonSynth/Hermodr A Helferd [jPJVG0n0EPE].mp3", name: "Hermodr A Helferd"},
+          {src: "audio/DungeonSynth/With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars [V8JZ3KDn1g4].mp3", name: "With Dreams of Adventure, I Smoke from My Longpipe Beneath the Stars"}
+        ];
+        let dsIndex = 0;
+        const dsPlayer = document.getElementById('dungeonSynthPlayer');
+        const dsTrackName = document.getElementById('dsTrackName');
+
+        function loadDSTrack(idx) {
+          dsPlayer.src = dsTracks[idx].src;
+          dsTrackName.textContent = dsTracks[idx].name;
+          dsPlayer.play();
+        }
+
+        function nextTrack() {
+          dsIndex = (dsIndex + 1) % dsTracks.length;
+          loadDSTrack(dsIndex);
+        }
+
+        function prevTrack() {
+          dsIndex = (dsIndex - 1 + dsTracks.length) % dsTracks.length;
+          loadDSTrack(dsIndex);
+        }
+
+        dsPlayer.addEventListener('ended', nextTrack);
+        // Initialize
+        loadDSTrack(dsIndex);
+
+        // Prevent multiple audio players from playing simultaneously
+        document.addEventListener('play', function(e) {
+          const allAudio = document.querySelectorAll('audio');
+          allAudio.forEach(audio => {
+            if (audio !== e.target) {
+              audio.pause();
+            }
+          });
+        }, true);
+      </script>
+
+      <p>
+        Now, scroll down to meet them.
       </p>
     </section>
 
@@ -27,13 +88,28 @@
       <div class="char-text">
         <h2>Ulud — The Wandering Soul</h2>
         <p>
-          Write Ulud’s backstory here. Describe his class, struggles, and vibe.
+          Ulud is a Tortle Druid who roams the land in search of knowledge and
+          connection with nature. Slow moving, soft spoken hermit. He often serves
+          as a mediator between conflicting parties. A little silly at times, but
+          always reliable and steadfast. He keeps a tablet of ancient druidic
+          knowledge close at hand to communicate with the stars and other druids.
         </p>
         <ul>
-          <li><strong>Race:</strong> ???</li>
-          <li><strong>Class:</strong> ???</li>
-          <li><strong>Alignment:</strong> ???</li>
+          <li><strong>Race:</strong> Tortle</li>
+          <li><strong>Class:</strong> Druid</li>
+          <li><strong>Alignment:</strong> Neutral Good</li>
+          <li><strong>Background:</strong> Hermit</li>
+          <li><strong>Height:</strong> 1.5m</li>
+          <li><strong>Purpose:</strong><s>To eat the best chicken.</s> To follow the stars.</li>
+
         </ul>
+        <div class="music-player">
+          <h3>Ulud's Theme</h3>
+          <audio controls>
+            <source src="audio/Harvest Dawn [s9L9sNtv1-g].mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+          </audio>
+        </div>
       </div>
       <div class="char-img">
         <img src="images/ulud.jpg" alt="Ulud portrait">
@@ -43,12 +119,12 @@
     <!-- Arcaena -->
     <section id="arcaena" class="character alt">
       <div class="char-text">
-        <h2>Arcaena — The Silent Flame</h2>
+        <h2>Arcaena Krislee — The Silent Flame</h2>
         <p>
-          Arcaena is a short 1.5m tall elf with a slender build.
+          Arcaena is a petite high elf with an enigmatic presence.
           Her vibe is empty, mysterious, and a bit eerie. 
           She reads books out of habit, not passion.
-          Usually just wanders into situations, and then asks herself "Why am I in this mess?"
+          Usually just wanders into situations, and then asks herself "Why am I in this mess?"<br>
 
           Incredibly intelligent and useful, but non talkative, never eager and just plain weird.
 
@@ -57,7 +133,17 @@
           <li><strong>Race:</strong> Elf</li>
           <li><strong>Class:</strong> Wizard</li>
           <li><strong>Alignment:</strong> Chaotic neutral.</li>
+          <li><strong>Background:</strong> Urchin</li>
+          <li><strong>Height:</strong> 1.5m</li>
+          <li><strong>Purpose:</strong> To find a place where she can live quietly reading books.</li>
         </ul>
+        <div class="music-player">
+        <h3>Arcaena's Theme</h3>
+        <audio controls>
+          <source src="audio/Тоска [1Gw3ZbXcF00].mp3" type="audio/mpeg">
+          Your browser does not support the audio element.
+        </audio>
+      </div>
       </div>
       <div class="char-img">
         <img src="images/arcaena.jpeg" alt="Arcaena portrait">
@@ -68,9 +154,15 @@
     <section id="gallery" class="gallery">
       <h2>Gallery</h2>
       <div class="grid">
-        <img src="images/art1.png">
-        <img src="images/art2.png">
-        <img src="images/art3.png">
+        <img src="images/art0.webp">
+        <img src="images/art1.webp">
+        <img src="images/art2.webp">
+        <img src="images/art3.webp">
+        <img src="images/art4.webp">
+        <img src="images/art5.webp">
+        <img src="images/art6.webp">
+        <img src="images/art7.webp">
+        <img src="images/art8.webp">
       </div>
     </section>
   </main>

style.css

@@ -113,6 +113,15 @@ footer {
   font-size: 0.9em;
 }
 
+footer a {
+  color: #ffcc66;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
 /* Responsive Tweaks */
 @media (max-width: 768px) {
   nav a {