<!DOCTYPE html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

    <div class="animated-art"></div>

  </div>

  <script>

    // Recursive function to generate animated art

    function generateArt(element, depth) {

      if (depth === 0) return;

      const art = document.createElement("div");

      art.className = "animated-art";

      element.appendChild(art);

      generateArt(art, depth - 1);

    }

    // Call the function to generate the dynamic recursive inscription with animated art

    const logo = document.getElementById("bitcoin-logo");

    generateArt(logo, 5); // You can adjust the depth as needed.

  </script>

  <!DOCTYPE html>

<html>

<head>

  <title>#Freeross Neon Sign with Matrix Effect</title>

  <style>

    body {

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      height: 100vh;

      background-color: #000;

      overflow: hidden;

    }

    .neon-sign {

      font-size: 50px;

      font-family: "Arial", sans-serif;

      text-transform: uppercase;

      letter-spacing: 10px;

      text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00, 0 0 30px #ff8c00;

      animation: flicker 1s infinite alternate;

      color: #ff8c00;

    }

    @keyframes flicker {

      0%, 100% {

        opacity: 1;

      }

      50% {

        opacity: 0.6;

      }

    }

    .petition-button {

      margin-top: 20px;

      background-color: #ff8c00;

      border: none;

      color: #fff;

      font-size: 24px;

      padding: 10px 20px;

      border-radius: 5px;

      cursor: pointer;

      text-decoration: none;

    }

    .petition-button:hover {

      background-color: #ff9933;

    }

    .matrix-container {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      pointer-events: none;

    }

    .matrix-text {

      font-family: "Courier New", monospace;

      font-size: 18px;

      line-height: 20px;

      color: #0f0;

      position: absolute;

      opacity: 0.8;

    }

  </style>

</head>

<body>

  <div class="matrix-container"></div>

  <div class="neon-sign">#Freeross</div>

  <a class="petition-button" href="https://www.change.org/p/clemency-for-ross-ulbricht-condemned-to-die-in-prison-for-an-e-commerce-website?hp" target="_blank">

    Sign the Petition

  </a>

  <script>

    const columns = 60;

    const rows = 30;

    const textSpeed = 50; // Adjust this to control the speed of falling characters

    function createMatrixEffect() {

      const container = document.querySelector(".matrix-container");

      const chars = "!@#$%^&*()_+1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./<>?~QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM"; // Characters to be displayed

      for (let i = 0; i < columns; i++) {

        const column = document.createElement("div");

        column.className = "matrix-text";

        for (let j = 0; j < rows; j++) {

          const char = document.createElement("span");

          char.textContent = chars[Math.floor(Math.random() * chars.length)];

          char.style.position = "absolute";

          char.style.left = i * 20 + "px";

          char.style.top = j * 20 + "px";

          char.style.transition = "transform 0.1s";

          char.style.transform = "translateY(-100%)";

          column.appendChild(char);

        }

        container.appendChild(column);

      }

      const matrixTexts = document.querySelectorAll(".matrix-text");

      let currentOffset = 0;

      function updateTexts() {

        currentOffset = (currentOffset + 1) % rows;

        for (const text of matrixTexts) {

          text.style.transform = `translateY(${currentOffset * 20}px)`;

        }

        setTimeout(updateTexts, textSpeed);

      }

      setTimeout(updateTexts, textSpeed);

    }

    createMatrixEffect();

    const neonSign = document.querySelector(".neon-sign");

    const colors = ["#ff8c00", "#ff9933"]; // Orange and a lighter shade of orange

    let currentColorIndex = 0;

    function changeColor() {

      neonSign.style.textShadow = `0 0 10px #fff, 0 0 20px #fff, 0 0 30px ${colors[currentColorIndex]}`;

      neonSign.style.color = colors[currentColorIndex];

      currentColorIndex = (currentColorIndex + 1) % colors.length;

    }

    setInterval(changeColor, 1000); // Change color every 1 second

  </script>

</body>

</html>