<!-- Shuffle -->
<!--


                      ╔══╗
                      ╚╗╔╝[Furry Rave]
                      ╔╝(¯`v´¯)(¯`v´¯)
                      ╚══`.¸.´  `.¸.´


                                ....
                                .@.@....:     ....
                               ..@..-@.*@...:...-@..
                               :.@.....@..:.@@.@....@:
                                .#..::...::............
                                ..@..:::::::::..@..::..@:
                          .........@....:::::::.@@..::..@:
                          ..@........@@.:::::::.::@...:..@.
                            ....@..:....:::::::..+:=*.:..@.:
                          .:...@@@....::::::::..@@-=+...@@..
                       ...=@::@.....@....:::...@:::==@:@:@..:
                     ...@:::@@..:.=....@.::..@@:-::::-:::@:@.:
                    ..@##:::::::::@...@@..:.@@::::@@@===:::-..
                    ..@@@@@@@@@@@@..@#@=....@:::@::::-====:@-..
                          ...::.@.@=::::@..@::@-:::::-===:::@.
                             ..=...*:@@@:@@:::::@@@@%**+-:@@..
                                 :.@-:::@*::=:@@:.....:.@%@:=.
                                 :..@:::@:-==-:...........@:@.
                                 ....@:@::::::::.@@@#@.::..@.:
                                    :.@%@@@@@....#**#..:::.@@...:
                          ......:    ..@@@@@...@.@@@-.::...@::@*....
                        :.@.::.@..    .....@@............@:-:::-=#@.@.+
                       :.@..::.....   .@......:::::::..@.=:====+=:@+@@..:
                       .@.......@@@....@@...@..:::::..:..#====+::++-::-+@...
                      :.@.:.@....@.@@@:::@-..@...:...%..::+===-:@+-====::=+@...
                      ........@.@.@@:@=@:@:+...@.:.-*..::.%+::::+@-=======::#:@.:
                      ....@.:.@..@:::-:*@::@-....:.@=...:.:=-@#@+:::==-:::+@...@..
                      ..+........@@:==-:%@%@:#::::..@=@..::.-::.@@@+---#@%.:.:....
                      .#@.....@*+@:-===-:==*:::.:::...=@.::.-+-@.....@.....::::.@.
                      .@+++%@@...#:-::-%@@..@:@.:::::....:::.*-:..::..@.:::::::.@.:
                       ..@.....::=#-:@...::.@:+.::::::::::::.%=:@.:::.@..::.....@.:
                        .....::....@..:    .@:*:::::::::::::.+=:@..:..@#*****@@....
                         ..@.::.@..:      :.@:*-.:::::::::::.+=-:@.:.@@+++++++@**@.
                          ......:         :.@:*=::::::::::::.+==:@...@@-.:::=@@++@@.
                             #.:.::.: .:: :.=:+.::::::::::::.%==-:@.@....::......@@:
                        .....:+:...@-..@...:--#.::::::::::::.%===:@@..::::::::::.@.:
                     ...@@....:*@.....:@.@@@=+%.:::::::::::..+===::.@.::...:...:.@.:
                   :.#:..#%%@##:@%:%@@#..@::=*.:::::::::::..#+====:@.....@.:.+...@..
                  ..@+#@-::::::::@#::::@:::+#::::::::::::::*+=====:@..@@.....@.@@..
                   ..@:::=======::*@::@::=+*::::::::::::::.*======:@.....@@@.....
                  ..=::==========:@*-@::==#:::::::::::::::*+======:@.:   :::
                 ..+=============:@@:--===#.:::::::::::::*+=======:@.:
                ..@:=======:::=:::@::+==++-::::::::::::#++=======-:@.
                .:::--====::@:--@@::=====*:::::::::::#++=========:@.:
                .@::@==-::-@@@..@::=====+#::::::::-*+===========::@..
                .@=@-:::@@.....@:-=====+#:::::::.:+============-:@.:
                 ...+@@...   .=-:*****#+::::::::.@:===========--@..
                  .....      ..@..=::::..::::::..@::=========::@..
                              ..@....::::::::::.@.@::=======::@..
                               ...@@......:::::....@::-=-=:-:@.:
                                 :.@..@@@.:...::::..@@+@**+@..:
                                 ..@........@.-:::..:.......:
                                  :.@@@..@@%..:::..@..
                                    ..@@.....:::..@..
                                   :.@...@.:::...@..
                                   ..@..@.......@..
                                     ...@@@@@@@...
                                        .::::..
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta property="og:title" content="Racks's Website'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:description" content="My Biography">
    <meta property="og:image" content="https://raskinthewild.com/skyair.png">
    <meta property="og:url" content="https://raskinthewild.com/bio">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="sky.gif" >
    <title>Puro :3</title>

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Racks's Bio">
    <meta name="twitter:description" content="OwO :3 ">
    <meta name="twitter:image" content="https://raskinthewild.com/skyair.jpg">
    <title>Racks Bio</title>
    <style>
        body {
            margin: 0;
            padding-top: 222px; /* Space at the top */
            padding-bottom: 222px; /* Space at the bottom */
            overflow-y: auto; /* Ensures scrollbar appears when content exceeds screen height */
            background: black;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
.container {
    max-width: 80%;
    width: auto;
    margin: 0 auto;
    background: #23272a;
    background: #23272a url('https://raskinthewild.com/puro-bio.png') no-repeat center center;
    background-size: cover; 
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #E0E0E0;
    padding: 20px;
    text-align: justify;
    word-wrap: break-word;
}

.profile-img {
    margin-bottom: 20px;
}


        .profile-img {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 50px;
            height: 50px;
            background: url('puro.png');
            background-size: cover;
            border-radius: 50%;
        }
        .text {
    margin-top: 59px;
    margin-bottom: 20px;
}

        .console {
            width: 80%;
            height: 100px;
            background: #444;
            color: #fff;
            border-radius: 5px;
            margin-top: 20px;
            padding: 10px;
            font-family: 'Consolas', monospace;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .console-input {
            border: none;
            background: none;
            color: #fff;
            outline: none;
            font-family: 'Consolas', monospace;
            width: calc(100% - 20px);
        }
        .console-input:focus {
            outline: none;
        }
        .instruction-text {
            color: #0f0;
            margin-bottom: 5px;
        }

        .instruction-text2 {
            color: #ff0000;
            margin-bottom: 5px;
        }
        .input-area {
            display: flex;
            align-items: center;
        }
        .prompt {
            margin-right: 5px;
        }
        .blink {
            animation: blinker 1s linear infinite;
        }
        @keyframes blinker {
            50% { opacity: 0; }
        }


@media screen and (max-width: 600px) {
  .text {
    font-size: 14px;
  }
}
  </style>
</head>
<body>
    <script src="puro.js"></script>
    <script>
  consoleimg.load('https://raskinthewild.com/sky.png',{size:250})
  </script>
<div class="container">
    <div class="text">
        SECURE-CONTAINER
    </div>
    <div class="profile-img"></div>
</div>

    <div class="console">
        <div class="instruction-text">To go back, type "back" and press Enter</div>
        <div class="instruction-text2"></div>
        <div class="input-area">
            <div class="prompt">></div>
            <input type="text" class="console-input" id="consoleInput" autofocus>
            <span class="blink">_</span>
        </div>
    </div>


   <script src="three.min.js.js"></script>
    <script src="vanta.clouds.min.js.js"></script>
    <script>
        VANTA.CLOUDS({
            el: "body",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            skyColor: 0x87ceeb,
            cloudShadowColor: 0x4b4b4b,
            speed: 0.40
        });

        const consoleInput = document.getElementById("consoleInput");
        consoleInput.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                if (consoleInput.value === "back") {
                    window.location.href = "https://raskinthewild.com/";
                } else {
                    alert("Error: Invalid command");
                    consoleInput.value = "";
                }
            }
        });
    </script>
    <script>
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (gl && gl instanceof WebGLRenderingContext) {
instructionText.remove();
} else {
const instructionText2 = document.querySelector('.instruction-text2');
    instructionText2.textContent = "Error, WebGL is not supported on your browser lol. enable it if you want to see the background :3";
}
</script>
</body>
</html>