<!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>



https://media.discordapp.net/attachments/881939901992542231/1273066457613205585/image.png?ex=66e96d47&is=66e81bc7&hm=ee4508dc84fc57fc821da3d90b698389335697b0bf6381b57c1a3d0dadf1d95f&=&format=webp&quality=lossless&width=825&height=619

put this image in the background and make it bounce across the borders. when it goes in front of the text background it should appear more blurry as if looking through a window