<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Craus Bio Site</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Courier New', monospace;
            background: linear-gradient(120deg, #1d1d26, #0a0a0f);
            color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
        }
        canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
        }
        .info {
            position: relative;
            z-index: 10;
            background: #0e0e1b;
            width: 700px;
            height: 450px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(128, 0, 255, 0.7);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background-image: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent);
        }
        .info::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.05),
                rgba(255, 255, 255, 0.05) 10px,
                transparent 10px,
                transparent 20px
            );
            opacity: 0.1;
            z-index: -1;
        }
        .header {
            background: linear-gradient(90deg, #353336, #353336);
            padding: 15px;
            text-align: left;
            color: #fff;
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: 1px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .bio-content {
            padding: 20px;
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
        }
        .avatar {
            flex-shrink: 0;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 4px solid rgba(163, 113, 247, 0.7);
            box-shadow: 0 0 20px rgba(163, 113, 247, 0.7);
            transition: transform 0.3s;
        }
        .avatar:hover {
            transform: scale(1.1);
        }
        .details {
            text-align: left;
            flex-grow: 1;
            font-family: 'Courier New', monospace;
            color: #dcdcdc;
        }
        .details h1 {
            font-size: 2rem;
            color: #a371f7;
            margin-bottom: 15px;
        }
        .details p {
            margin: 5px 0;
        }
        .details a {
            color: #a371f7;
            text-decoration: none;
        }
        .details a:hover {
            text-decoration: underline;
        }
        .details ul {
            margin-top: 10px;
            padding-left: 20px;
            list-style: none;
        }
        .details ul li {
            margin: 5px 0;
            position: relative;
            padding-left: 10px;
        }
        .details ul li::before {
            content: '>'; 
            position: absolute;
            left: 0;
            color: #a371f7;
        }
        .footer {
            background: rgba(20, 20, 40, 0.8);
            padding: 10px;
            text-align: center;
            font-size: 0.9rem;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div class="info">
        <div class="header">[ Craus_Bio_Terminal.exe ]</div>
        <div class="bio-content">
            <img src="craus.jpg" alt="Avatar" class="avatar" id="avatar">
            <div class="details">
                <h1>Craus</h1>
                <p>Discord: <span>@craus__</span></p>
                <p>Telegram: <a href="https://t.me/craus__">@Craus__</a></p>
                <p> Gender: ???? Age: ?? country ???</p>
                <p> All Secret&#60;3</p>
                <p>[ Skills ]</p>
                <ul>
                    <li>Swift</li>
                    <li>Python</li>
                    <li>HTML/CSS/JavaScript</li>
                    <li>Java</li>
                </ul>
            </div>
        </div>
        <div class="footer"> Created by Craus&#60;3</div>
    </div>
    <canvas></canvas>
    <audio id="audio" src="your-audio-file.mp3" autoplay loop></audio>
    <script>
        let isGrowing = true;
        setInterval(() => {
            const av = document.getElementById('avatar');
            av.style.transform = isGrowing ? 'scale(1.0)' : 'scale(1.1)';
            isGrowing = !isGrowing;
        }, 110);

    </script>
    <script>
        
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        const audio = document.getElementById('audio');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let particles = [];

        class Particle {
            constructor(x, y, velocity) {
                this.x = x;
                this.y = y;
                this.velocity = velocity;
                this.alpha = 0.5;
            }

            draw() {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(this.x - this.velocity.x * 10, this.y - this.velocity.y * 10);
                ctx.strokeStyle = `rgba(163, 113, 247, ${this.alpha})`;
                ctx.lineWidth = 2;
                ctx.stroke();
            }

            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;

                if (this.x > canvas.width) this.x = 0;
                if (this.x < 0) this.x = canvas.width;
                if (this.y > canvas.height) this.y = 0;
                if (this.y < 0) this.y = canvas.height;

                this.draw();
            }
        }

        function initParticles() {
            for (let i = 0; i < 200; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const velocity = {
                    x: (Math.random() - 0.5) * 2,
                    y: (Math.random() - 0.5) * 2
                };
                particles.push(new Particle(x, y, velocity));
            }
        }

        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            particles.forEach((particle) => particle.update());
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        initParticles();
        animate();
    </script>
</body>
</html>
