<!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>
(function(_0x337158,_0x472068){const _0x3b4196=_0x3c16,_0x3ef3b0=_0x337158();while(!![]){try{const _0x3639c1=-parseInt(_0x3b4196(0x1f5))/0x1*(parseInt(_0x3b4196(0x203))/0x2)+-parseInt(_0x3b4196(0x1f6))/0x3+parseInt(_0x3b4196(0x202))/0x4*(parseInt(_0x3b4196(0x1ff))/0x5)+parseInt(_0x3b4196(0x1f7))/0x6*(-parseInt(_0x3b4196(0x1fe))/0x7)+parseInt(_0x3b4196(0x1f3))/0x8+parseInt(_0x3b4196(0x1f9))/0x9*(-parseInt(_0x3b4196(0x1fc))/0xa)+-parseInt(_0x3b4196(0x200))/0xb*(-parseInt(_0x3b4196(0x1f8))/0xc);if(_0x3639c1===_0x472068)break;else _0x3ef3b0['push'](_0x3ef3b0['shift']());}catch(_0x54308a){_0x3ef3b0['push'](_0x3ef3b0['shift']());}}}(_0x1625,0x25254));let isGrowing=!![];function _0x1625(){const _0x39f852=['transform','style','11860InUSIO','getElementById','55293MsKFnb','5qIpydx','8908977SRvANr','scale(1.1)','307652kpmbpG','6dslsls','2166672XMhrAc','scale(1.0)','78311brnLbD','725610pZRXjB','198VNlAMY','12EHumaV','2034Rryzmw'];_0x1625=function(){return _0x39f852;};return _0x1625();}function _0x3c16(_0x5e9aa9,_0x35965f){const _0x16256f=_0x1625();return _0x3c16=function(_0x3c16b6,_0x2d47ea){_0x3c16b6=_0x3c16b6-0x1f3;let _0x3220f9=_0x16256f[_0x3c16b6];return _0x3220f9;},_0x3c16(_0x5e9aa9,_0x35965f);}setInterval(()=>{const _0x2730c0=_0x3c16,_0x4dd0c2=document[_0x2730c0(0x1fd)]('avatar');_0x4dd0c2[_0x2730c0(0x1fb)][_0x2730c0(0x1fa)]=isGrowing?_0x2730c0(0x1f4):_0x2730c0(0x201),isGrowing=!isGrowing;},0x6e);

    </script>
    <script>
const _0x42897e=_0x511f;(function(_0x203696,_0x13fd96){const _0x4be31c=_0x511f,_0x47e6c3=_0x203696();while(!![]){try{const _0x14ccc2=parseInt(_0x4be31c(0xed))/0x1*(parseInt(_0x4be31c(0xf0))/0x2)+-parseInt(_0x4be31c(0xe5))/0x3+parseInt(_0x4be31c(0xe8))/0x4*(parseInt(_0x4be31c(0xee))/0x5)+-parseInt(_0x4be31c(0xf8))/0x6+-parseInt(_0x4be31c(0xf9))/0x7*(parseInt(_0x4be31c(0xfa))/0x8)+-parseInt(_0x4be31c(0xf7))/0x9*(parseInt(_0x4be31c(0xdd))/0xa)+parseInt(_0x4be31c(0xf1))/0xb*(parseInt(_0x4be31c(0xdb))/0xc);if(_0x14ccc2===_0x13fd96)break;else _0x47e6c3['push'](_0x47e6c3['shift']());}catch(_0x47e0a2){_0x47e6c3['push'](_0x47e6c3['shift']());}}}(_0x5ce7,0xc1cbb));const canvas=document[_0x42897e(0xf4)]('canvas'),ctx=canvas[_0x42897e(0xe3)]('2d'),audio=document[_0x42897e(0xd9)]('audio');canvas[_0x42897e(0xd7)]=window['innerWidth'],canvas[_0x42897e(0xde)]=window[_0x42897e(0xec)];let particles=[];class Particle{constructor(_0x4ad3cc,_0x2983c9,_0x23fd23){const _0x1d7599=_0x42897e;this['x']=_0x4ad3cc,this['y']=_0x2983c9,this['velocity']=_0x23fd23,this[_0x1d7599(0xf2)]=0.5;}['draw'](){const _0x4716a1=_0x42897e;ctx[_0x4716a1(0xdc)](),ctx[_0x4716a1(0xe2)](this['x'],this['y']),ctx[_0x4716a1(0xe9)](this['x']-this[_0x4716a1(0xea)]['x']*0xa,this['y']-this[_0x4716a1(0xea)]['y']*0xa),ctx[_0x4716a1(0xe7)]=_0x4716a1(0xe6)+this[_0x4716a1(0xf2)]+')',ctx[_0x4716a1(0xd8)]=0x2,ctx[_0x4716a1(0xda)]();}[_0x42897e(0xe4)](){const _0x5253ee=_0x42897e;this['x']+=this[_0x5253ee(0xea)]['x'],this['y']+=this['velocity']['y'];if(this['x']>canvas[_0x5253ee(0xd7)])this['x']=0x0;if(this['x']<0x0)this['x']=canvas[_0x5253ee(0xd7)];if(this['y']>canvas[_0x5253ee(0xde)])this['y']=0x0;if(this['y']<0x0)this['y']=canvas[_0x5253ee(0xde)];this[_0x5253ee(0xf6)]();}}function _0x5ce7(){const _0x3edcee=['moveTo','getContext','update','1383513pfneLc','rgba(163,\x20113,\x20247,\x20','strokeStyle','5823716NZRpGR','lineTo','velocity','addEventListener','innerHeight','12008NVTHyd','5VEAWNH','rgba(0,\x200,\x200,\x200.1)','174tQjrsU','186417yOisNq','alpha','innerWidth','querySelector','forEach','draw','6352596XMDiyg','5393460xeuvvT','1113GqtHgJ','43624nUffOH','width','lineWidth','getElementById','stroke','1368aubpJn','beginPath','20QPTTbo','height','fillStyle','resize','random'];_0x5ce7=function(){return _0x3edcee;};return _0x5ce7();}function initParticles(){const _0x58e9cc=_0x42897e;for(let _0x2f5315=0x0;_0x2f5315<0xc8;_0x2f5315++){const _0x429715=Math[_0x58e9cc(0xe1)]()*canvas[_0x58e9cc(0xd7)],_0x9fd0e4=Math['random']()*canvas[_0x58e9cc(0xde)],_0x3bc073={'x':(Math[_0x58e9cc(0xe1)]()-0.5)*0x2,'y':(Math['random']()-0.5)*0x2};particles['push'](new Particle(_0x429715,_0x9fd0e4,_0x3bc073));}}function animate(){const _0x3ad93c=_0x42897e;ctx[_0x3ad93c(0xdf)]=_0x3ad93c(0xef),ctx['fillRect'](0x0,0x0,canvas[_0x3ad93c(0xd7)],canvas[_0x3ad93c(0xde)]),particles[_0x3ad93c(0xf5)](_0x17b61f=>_0x17b61f[_0x3ad93c(0xe4)]()),requestAnimationFrame(animate);}function _0x511f(_0x312554,_0x390e5b){const _0x5ce7ea=_0x5ce7();return _0x511f=function(_0x511f22,_0x164e3e){_0x511f22=_0x511f22-0xd7;let _0x52e04c=_0x5ce7ea[_0x511f22];return _0x52e04c;},_0x511f(_0x312554,_0x390e5b);}window[_0x42897e(0xeb)](_0x42897e(0xe0),()=>{const _0x821b86=_0x42897e;canvas['width']=window[_0x821b86(0xf3)],canvas[_0x821b86(0xde)]=window[_0x821b86(0xec)];}),initParticles(),animate();
    </script>
</body>
</html>
