[
  {
    "search": "colorDisplay.addEventListener('mousemove', function (e) {",
    "replace": "document.addEventListener('mousemove', function (e) {"
  },
  {
    "search": "let x = Math.floor((e.clientX / window.innerWidth) * 255);\n                        let y = Math.floor((e.clientY / window.innerHeight) * 255);\n                        let z = Math.floor((x + y) / 2);\n                        let rgb = `rgb(${x}, ${y}, ${z})`;\n                        let hex = `#${rgbToHex(x)}${rgbToHex(y)}${rgbToHex(z)}`;\n                        colorDisplay.style.background = rgb;\n                        document.getElementById('rgb').textContent = rgb;\n                        document.getElementById('hex').textContent = hex;",
    "replace": "let element = document.elementFromPoint(e.clientX, e.clientY);\n                        if (element) {\n                            let color = getComputedStyle(element).backgroundColor;\n                            if (color) {\n                                let rgb = color.match(/\\d+/g);\n                                if (rgb) {\n                                    let r = parseInt(rgb[0]);\n                                    let g = parseInt(rgb[1]);\n                                    let b = parseInt(rgb[2]);\n                                    let hex = `#${rgbToHex(r)}${rgbToHex(g)}${rgbToHex(b)}`;\n                                    colorDisplay.style.background = color;\n                                    document.getElementById('rgb').textContent = `rgb(${r}, ${g}, ${b})`;\n                                    document.getElementById('hex').textContent = hex;\n                                    return;\n                                }\n                            }\n                        }\n                        colorDisplay.style.background = 'transparent';\n                        document.getElementById('rgb').textContent = 'Move your mouse!';\n                        document.getElementById('hex').textContent = 'See the colors change!';"
  }
]