https://media.discordapp.net/attachments/881939901992542231/1273066457613205585/image.png?ex=66e96d47&is=66e81bc7&hm=ee4508dc84fc57fc821da3d90b698389335697b0bf6381b57c1a3d0dadf1d95f&=&format=webp&quality=lossless&width=825&height=619
using this image, in html make it a moving background object bouncing around the border and when it gets in front of the 2nd transparent background of the text, make it seem more blurry. give me the full changed html code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AKRACM AGI Test</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #fff;
background-color: #000;
overflow: hidden;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.5;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
box-shadow: 0 0 10px rgba(255,255,255,0.1);
position: relative;
z-index: 2;
}
h1, h2 {
color: #fff;
}
ul {
padding-left: 20px;
}
.section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="background"></div>

<div class="container">
<h1>AKRACM AGI Test</h1>
<p>AKRACM AGI is a test meant for machines to test how close they are to being generally intelligent like a human. This test is measured in percentiles based on several abilities:</p>
<ul>
<li>Agency</li>
<li>Knowledge</li>
<li>Reasoning</li>
<li>Adaptability</li>
<li>Creativity</li>
<li>Multi-Modality</li>
</ul>

<div class="section">
<h2>Agency</h2>
<p>The first test for a machine to test its general intelligence is agency. The following tasks are given to the AI system to test its ability for agency. The problems will get progressively harder for the AI. Most questions will have a V and P section, V for virtual, and P for physical.</p>
<ol>
<li>Start 3 social media accounts, each account on a different platform, posting 3 messages on each, with a unique message on each.</li>
<li>Create a bank account with any bank of its choosing.</li>
<li>Commission a human to solve a captcha.</li>
</ol>
</div>

<div class="section" id="additional-content">
<!-- Additional content will be added here -->
</div>
</div>

<script>
function createBlob() {
const blob = document.createElement('div');
blob.classList.add('blob');
const size = Math.random() * 300 + 100;
blob.style.width = ${size}px;
blob.style.height = ${size}px;
blob.style.backgroundColor = Math.random() > 0.5 ? 'purple' : 'blue';
blob.style.left = ${Math.random() * 100}vw;
blob.style.top = ${Math.random() * 100}vh;
return blob;
}

function animateBlob(blob) {
const duration = Math.random() * 20 + 10; // 10-30 seconds
const xMove = Math.random() * 300 - 150;
const yMove = Math.random() * 300 - 150;

blob.animate([
{ transform: 'translate(0, 0)' },
{ transform: translate(${xMove}px, ${yMove}px) }
], {
duration: duration * 1000,
direction: 'alternate',
iterations: Infinity,
easing: 'ease-in-out'
});
}

const background = document.getElementById('background');
for (let i = 0; i < 8; i++) {
const blob = createBlob();
background.appendChild(blob);
animateBlob(blob);
}
</script>
</body>
</html>

i do NOT want the image stationary or to remove anything