<canvas id="root" width="256" height="256"></canvas>
<script>
    const canvas = document.getElementById('root');
    const ctx = canvas.getContext('2d');

    canvas.parentElement.style.width = '100%';
    canvas.parentElement.style.height = '100%';
    canvas.parentElement.style.padding = '0px';
    canvas.parentElement.style.margin = '0px';

    let serialNumber = 1; // Initial serial number

    const dogRaces = ['Labrador Retriever', 'German Shepherd', 'Golden Retriever', 'Bulldog', 'Beagle', 'Poodle', 'Shiba Inu', 'Boxer', 'Dachshund', 'Yorkshire Terrier', 'Siberian Husky', 'Pomeranian', 'Shih Tzu', 'Rottweiler', 'Border Collie', 'Great Dane', 'Doberman Pinscher', 'Australian Shepherd', 'Cavalier King Charles Spaniel', 'Basset Hound', 'Shetland Sheepdog', 'Bernese Mountain Dog', 'Papillon', 'Boston Terrier', 'Cocker Spaniel'];
    const dogNames = ['Bella', 'Max', 'Lucy', 'Bailey', 'Charlie', 'Dogi', 'Cooper', 'Scooby', 'Rocky', 'Molly', 'Lola', 'Buddy', 'Maggie', 'Stella', 'Snoopy', 'Sophie', 'Tucker', 'Chloe', 'Duke', 'Lily', 'Oliver', 'Rosie', 'Welsch', 'Ruby', 'Zeus', 'Roxy', 'Gus', 'Roscoe', 'Lexi', 'Finn', 'Gracie', 'Jake', 'Zoe', 'Riley', 'Ollie', 'Mia', 'Marley', 'Winston', 'Annie', 'Toby', 'Luna', 'Harley', 'Sasha', 'Penny', 'Bailey', 'Goofy', 'Ellie', 'Dexter', 'Hazel'];

 const asciiArt = `
    / \\__
   (    @\\___
   /         O
  /   (_____/
 /_____/   U
 `

    drawAsciiArt(asciiArt);

    function drawAsciiArt(art) {
        const lines = art.split('\n');
        const lineHeight = canvas.height / lines.length;
        const fontSize = Math.min(lineHeight * 0.8, 30); // Adjust font size dynamically
        ctx.font = fontSize + 'px monospace';
        ctx.fillStyle = 'black'; // Set background color
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        const maxWidth = lines.reduce((max, line) => Math.max(max, ctx.measureText(line).width), 0);
        const startX = (canvas.width - maxWidth) / 2;
        const startY = (canvas.height - lines.length * lineHeight) / 2; // Center vertically
        lines.forEach((line, index) => {
            const yPos = startY + (index + 1) * lineHeight;
            if (line.includes('@')) { // Set random bright color for '@' symbol
                ctx.fillStyle = getRandomBrightColor();
            } else {
                ctx.fillStyle = 'white'; // Set color for other characters
            }
            ctx.fillText(line, startX, yPos);
        });

        // Add serial number at the bottom
        ctx.fillStyle = 'white';
        ctx.font = '10px Arial'; // Set smaller font size for serial number
        ctx.textAlign = 'right';
        ctx.fillText(`₿-${pad(serialNumber)}-${getRandomDogRace()}-${getRandomDogName()}`, canvas.width  -5, canvas.height - 5); // Adjust position and replace with actual top 25 dog races and 50 dog names
    }

    function pad(number) {
        return number.toString(); // No leading zeros
    }

    function getRandomBrightColor() {
        const colors = ['#FFFF00', '#FFA500', '#FF0000', '#008000', '#0000FF', '#FFFFFF']; // Yellow, Orange, Red, Green, Blue, White
        return colors[Math.floor(Math.random() * colors.length)];
    }

    function getRandomDogRace() {
        return dogRaces[Math.floor(Math.random() * dogRaces.length)];
    }

    function getRandomDogName() {
        return dogNames[Math.floor(Math.random() * dogNames.length)];
    }
</script>