<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Matrix Rain with Blue Neon Text</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
      font-family: monospace;
    }

    canvas {
      display: block;
    }

    #static-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #00bfff; /* Blue neon color */
      font-size: 3vw; /* Responsive font size */
      font-family: "Courier New", Courier, monospace;
      text-align: center;
      white-space: pre-wrap; /* Allows multi-line text */
      line-height: 1.5; /* Adjusts spacing between lines */
      z-index: 10;
      text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 30px #00bfff;
      animation: glow 1.5s infinite alternate; /* Glowing animation */
    }

    /* Glowing animation */
    @keyframes glow {
      0% {
        text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 30px #00bfff;
      }
      100% {
        text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 40px #00bfff, 0 0 60px #00bfff;
      }
    }
  </style>
</head>
<body>
  <div id="static-text">
    "Those who ride the tiger can never dismount."
  </div>
  <canvas id="matrix"></canvas>
  <script>
    const canvas = document.getElementById("matrix");
    const ctx = canvas.getContext("2d");

    // Function to resize canvas
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }

    // Set initial canvas size
    resizeCanvas();

    const sciFiLetters = "アカサタナハマヤラワ0123456789!@#$%^&*()_+";
    const fontSize = 14; // Smaller font size for falling letters
    let columns = Math.floor(canvas.width / fontSize);

    // Create an array of drops
    let drops = Array(columns).fill(1);

    function draw() {
      // Black background with slight opacity for trail effect
      ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Neon green text
      ctx.fillStyle = "#00bfff"; // Blue neon color for falling letters
      ctx.font = `${fontSize}px monospace`;

      // Loop through drops
      for (let i = 0; i < drops.length; i++) {
        const text = sciFiLetters[Math.floor(Math.random() * sciFiLetters.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        // Randomly reset drop to the top
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
          drops[i] = 0;
        }

        // Increment Y coordinate
        drops[i]++;
      }
    }

    // Redraw on window resize
    window.addEventListener("resize", () => {
      resizeCanvas();
      columns = Math.floor(canvas.width / fontSize);
      drops = Array(columns).fill(1);
    });

    setInterval(draw, 50);
  </script>
</body>
</html>