<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap"
      rel="stylesheet"
    />
    <title>⟡𝙆𝙤𝙖𝙡𝙖³</title>
    
  </head>
  <body class="satella">
    <script src="utilities.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

    <div class="flex-body">
      <div class="socials">
        <div class="center">
          <img
            class="satella"
            src="resources/images/pfp.png"
            alt="Icon"
          />
          <p class="username">⟡𝙆𝙤𝙖𝙡𝙖³</p>
        </div>     

        <div class="link">
          <button
            class="link-button"
            style="background:none; border:none; padding:0; cursor:pointer;"
            onclick="window.open('https://discord.gg/PnwWcywFyb', '_blank')"
            aria-label="Open Discord invite"
          >
            <img
              class="link-image"
              src="resources/images/icon_steam.png"
              alt="Icon"
            />
          </button>
        
          <button
            class="link-button"
            style="background:none; border:none; padding:0; cursor:pointer;"
            onclick="window.open('https://mail.google.com/mail/?view=cm&fs=1&to=meowtechxd.lol@gmail.com', '_blank')"
            aria-label="Send Email"
          >
            <img
              class="link-image"
              src="resources/images/icon_x.jpg"
              alt="Icon"
            />
          </button>
        
          <button
            id="copyDiscord"
            style="background:none; border:none; padding:0; cursor:pointer;"
            aria-label="Copy Discord address"
          >
            <img
              class="link-image"
              src="resources/images/icon_discord.png"
              alt="Icon"
            />
          </button>
        </div>

        
          
          
          <script>
            document.addEventListener('DOMContentLoaded', () => {
              const btn = document.getElementById('copyDiscord');
              btn.addEventListener('click', e => {
                e.preventDefault();
                navigator.clipboard.writeText('bc1qkycmd4x5k0uyex5upjra6f0xa6tvrdahdn4fd9');
              });
            });
          </script>
          
                
        </div>
      </div>
    </div>


    <div class="flex-body-bio" style="display:none">
      <div class="bio">
        <pre style="
            font-family:monospace;
            font-size:16.3px;
            line-height:1.15;
            margin:50px 0 0 0;
            color:#fff;
            text-shadow:0 0 6px #fff, 0 0 15px #fff;
            white-space:pre;">
            
            «────✦« ⋅ʚ♡ɞ⋅ »✦────»  
            ╭────┈ ↷  
            │ ✎┊ **𝐀𝐛𝐨𝐮𝐭 𝐌𝐞**  
            │╭────────────╯  
            ││•(**𝐍𝐚𝐦𝐞**): **𝐙𝐚𝐜𝐡** 💬  
            ││•(**𝐀𝐠𝐞**): **15** 🎂  
            ││•(**𝐁𝐢𝐫𝐭𝐡𝐝𝐚𝐲**): **14𝐭𝐡 𝐉𝐚𝐧** 🎂  
            ││•(**𝐍𝐚𝐭𝐢𝐨𝐧𝐚𝐥𝐢𝐭𝐲**): **𝐒𝐰𝐞𝐝𝐢𝐬𝐡, 6,1𝐅𝐓** 🇸🇪  
            ││•(**𝐋𝐨𝐜𝐚𝐭𝐢𝐨𝐧**): **𝐒𝐰𝐞𝐝𝐞𝐧** 🌍  
            ││•(**𝐓𝐢𝐦𝐞𝐳𝐨𝐧𝐞**): **𝐆𝐌𝐓+2** 🕑  
            ╰───────────────╯  
            
              
            ╭────┈ ↷  
            │ ✎┊ **𝐌𝐲 𝐌𝐚𝐫𝐭𝐢𝐚𝐥 𝐉𝐨𝐮𝐫𝐧𝐞𝐲**  
            │╭────────────╯  
            ││•(**𝐓𝐚𝐞𝐤𝐰𝐨𝐧𝐝𝐨, 𝐌𝐮𝐚𝐲 𝐓𝐡𝐚𝐢 𝐩𝐫𝐚𝐜𝐭𝐢𝐭𝐢𝐨𝐧𝐞𝐫**): 🥋  
            ││•(**𝐋𝐞𝐬𝐬𝐨𝐧𝐬 𝐥𝐞𝐚𝐫𝐧𝐞𝐝**): **🥊 Discipline, respect & mind-body focus 🧘‍♂️**  
            ││•(**𝐅𝐨𝐫𝐦𝐞𝐫 𝐌𝐌𝐀 𝐟𝐢𝐠𝐡𝐭𝐞𝐫**): **🐉**  
            ││•(**𝐑𝐚𝐧𝐤**): **𝐏𝐮𝐫𝐩𝐥𝐞 𝐁𝐞𝐥𝐭 5𝐭𝐡 𝐒𝐭𝐫𝐢𝐩𝐞 𝐢𝐧 𝐭𝐊𝐃 (𝐫𝐞𝐭𝐢𝐫𝐞𝐝 𝐁𝐉𝐉 𝐭𝐨 𝐩𝐮𝐫𝐬𝐮𝐞 𝐓𝐊𝐃, 𝐌𝐮𝐚𝐲 𝐓𝐡𝐚𝐢)** 🟣  
            ╰───────────╯  
              
            ╭────┈ ↷  
            │ ✎┊ **𝐅𝐚𝐯𝐨𝐫𝐢𝐭𝐞𝐬**  
            │╭────────────╯  
            ││•(**𝐅𝐨𝐨𝐝**): **𝐂𝐡𝐢𝐜𝐤𝐞𝐧, 𝐑𝐢𝐜𝐞** 🍗🍚  
            ││•(**𝐌𝐮𝐬𝐢𝐜**): **𝐓𝐡𝐫𝐞𝐞 𝐃𝐚𝐲𝐬 𝐆𝐫𝐚𝐜𝐞, 𝐀𝐥𝐚𝐧 𝐖𝐚𝐥𝐤𝐞𝐫, 𝐎𝐝𝐞𝐭𝐚𝐫𝐢** 🎶  
            ││•(**𝐕𝐢𝐛𝐞𝐬**): **𝐌𝐮𝐬𝐢𝐜 & 𝐆𝐚𝐦𝐢𝐧𝐠** 🎹🎮  
            ││•(**𝐒𝐨𝐧𝐠𝐬**): **𝐇𝐮𝐦𝐚𝐧 - 𝐑𝐞𝐱 𝐁𝐚𝐧𝐧𝐞𝐫, 𝐀𝐧𝐢𝐦𝐚𝐥 𝐈 𝐇𝐚𝐯𝐞 𝐁𝐞𝐜𝐨𝐦𝐞** 🎧  
            ╰────────────╯  
              
            ╭────┈ ↷  
            │ ✎┊ **𝐈𝐧𝐭𝐞𝐫𝐞𝐬𝐭𝐬**  
            │╭────────────╯  
            ││•(**𝐆𝐚𝐦𝐢𝐧𝐠**): **𝐌𝐢𝐧𝐞𝐜𝐫𝐚𝐟𝐭, 𝐑𝐨𝐛𝐥𝐨𝐱 (𝐓𝐬𝐛, 𝐎𝐛𝐛𝐲𝐬, 𝐁𝐥𝐚𝐝𝐞 𝐁𝐚𝐥𝐥), 𝐖𝐨𝐖, 𝐋𝐨𝐋, 𝐆𝐰2, 𝐃𝐛𝐃, 𝐑𝐃𝐑2** 🎮  
            ││•(**𝐌𝐚𝐫𝐭𝐢𝐚𝐥 𝐀𝐫𝐭𝐬**): **𝐓𝐚𝐞𝐤𝐰𝐨𝐧𝐝𝐨, 𝐌𝐮𝐚𝐲 𝐭𝐡𝐚𝐢, 𝐁𝐉𝐉.** 🥋  
            ││•(**𝐓𝐞𝐜𝐡**): **𝐂𝐨𝐝𝐢𝐧𝐠, 𝐒𝐜𝐫𝐢𝐩𝐭𝐢𝐧𝐠 (𝐌𝐚𝐬𝐭𝐞𝐫𝐞𝐝 𝐂++, 𝐂#, 𝐏𝐲𝐭𝐡𝐨𝐧) 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭** 💻  
            ╰───────────╯  
              
            ╭────┈ ↷  
            │ ✎┊ **𝐇𝐚𝐫𝐝 𝐍𝐨'𝐬**  
            │╭────────────╯  
            ││•(❌): **𝐏𝐞𝐨𝐩𝐥𝐞 𝐰𝐡𝐨 𝐣𝐮𝐝𝐠𝐞 𝐩𝐞𝐨𝐩𝐥𝐞 𝐰𝐡𝐨 𝐚𝐫𝐞 𝐭𝐫𝐲𝐢𝐧𝐠 𝐭𝐨 𝐢𝐦𝐩𝐫𝐨𝐯𝐞**  
            ││•(❌): **𝐑𝐚𝐜𝐢𝐬𝐦 / 𝐇𝐨𝐦𝐨𝐩𝐡𝐨𝐛𝐢𝐚** ✋ (**𝐧𝐨𝐭 𝐭𝐫𝐮𝐞 𝐢 𝐟𝐮𝐜𝐤𝐢𝐧 𝐥𝐨𝐯𝐞 𝐭𝐡𝐢𝐬 𝐬𝐡𝐢𝐭 𝐰𝐡𝐞𝐧 𝐣𝐨𝐤𝐢𝐧𝐠**)  
            ││•(❌): **𝐏𝐞𝐨𝐩𝐥𝐞 𝐰𝐡𝐨 𝐝𝐨𝐧'𝐭 𝐭𝐚𝐥𝐤 𝐦𝐮𝐜𝐡, 𝐝𝐫𝐲 𝐩𝐞𝐨𝐩𝐥𝐞 𝐞.𝐠. "𝐤", "𝐜𝐨𝐨𝐥", "𝐨𝐤", "𝐢𝐝𝐤", "𝐧𝐨𝐭𝐡𝐢𝐧𝐠 𝐦𝐮𝐜𝐡"** 😒  
            ││•(❌): **𝐏𝐞𝐨𝐩𝐥𝐞 𝐰𝐡𝐨 𝐝𝐨𝐞𝐬𝐧'𝐭 𝐮𝐬𝐞 𝐜𝐚𝐩𝐬 𝐥𝐢𝐤𝐞 "𝐇𝐄𝐘 𝐆𝐈𝐕𝐄 𝐓𝐇𝐀𝐓 𝐁𝐀𝐂𝐊" 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐜𝐚𝐩𝐬 𝐬𝐨𝐮𝐧𝐝𝐬 𝐛𝐨𝐫𝐢𝐧𝐠** 🙄  
            ││•(❌): **𝐏𝐞𝐨𝐩𝐥𝐞 𝐰𝐡𝐨 𝐚𝐢𝐧'𝐭 𝐨𝐧 𝐥𝐢𝐤𝐞 24/7 (𝐃𝐨𝐞𝐬𝐧’𝐭 𝐜𝐨𝐮𝐧𝐭 𝐰𝐡𝐞𝐧 𝐲𝐨𝐮’𝐫𝐞 𝐬𝐥𝐞𝐞𝐩𝐢𝐧𝐠 𝐥𝐦𝐚𝐨)**  
            ╰─────╯  
              
            ╭────┈ ↷  
            │ ✎┊ **𝐁𝐞𝐟𝐨𝐫𝐞 𝐃𝐌'𝐢𝐧𝐠**  
            │╭────────────╯  
            ││•(**𝐃𝐌𝐬**): **𝐎𝐩𝐞𝐧** 💬  
            ││•(**𝐈𝐧𝐟𝐨**): **𝐄𝐧𝐞𝐫𝐠𝐞𝐭𝐢𝐜, 𝐏𝐥𝐚𝐲𝐟𝐮𝐥, (𝐃𝐞𝐟 𝐟𝐫𝐞𝐚𝐤𝐲 𝐭𝐨𝐨), 𝐌𝐚𝐲 𝐛𝐞 𝐨𝐟𝐟𝐞𝐧𝐬𝐢𝐯𝐞 𝐢𝐟 𝐜𝐨𝐦𝐟𝐲** 🗣️  
            ││/ᐠ •⩊•マ  
            ╰─────────╯  
            «────✦« ⋅ʚ♡ɞ⋅ »✦────»  
            

    
        </pre>
      </div>
    </div>
    



    <a
      href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      class="credits"
      target="_blank"
      >Click</a
    >
    

    <audio class="musicplayer" id="background-audio" loop>
      <source src="resources/audio/son.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio>

    <div class="musicplayer">
      <input
        type="range"
        id="custom-volume-slider-satella"
        min="0"
        max="100"
        value="100"
      />
    </div>

    <img
      class="pull-down-menu"
      src="resources/images/icon_arrow.png"
      alt="Arrow"
      onclick="clickOnImage()"
    />

    <!-- Hidden text for the .js to use this text to display -->
    <p class="añadir-texto" style="display: none">
      𝐌𝐚𝐤𝐞 𝐭𝐡𝐞 𝐦𝐨𝐬𝐭 𝐨𝐮𝐭 𝐨𝐟 𝐲𝐨𝐮𝐫𝐬𝐞𝐥𝐟...
    </p>
    <p class="añadir-texto" style="display: none">
      𝐅𝐨𝐥𝐥𝐨𝐰 𝐲𝐨𝐮𝐫 𝐝𝐫𝐞𝐚𝐦𝐬...
    </p>

    <video loop muted class="background-video">
      <source src="resources/video/bg.mp4" type="video/mp4" />
      Your browser does not support the video element.
    </video>
  </body>
</html>

</body>


  .mouse-trail {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: screen;
  }

.flex-body, .flex-body-bio, img, button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


<script>
  const trailCount = 10;
  const trails = [];

  for (let i = 0; i < trailCount; i++) {
    const dot = document.createElement('div');
    dot.classList.add('mouse-trail');
    document.body.appendChild(dot);
    trails.push(dot);
  }

  let mouseX = 0;
  let mouseY = 0;
  let positions = Array(trailCount).fill({x: 0, y: 0});

  window.addEventListener('mousemove', e => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  function animateTrail() {
    positions.pop();
    positions.unshift({x: mouseX, y: mouseY});

    trails.forEach((dot, index) => {
      const pos = positions[index];
      dot.style.left = pos.x + 'px';
      dot.style.top = pos.y + 'px';
    });

    requestAnimationFrame(animateTrail);
  }

  animateTrail();
</script>