could you move the info button from the bottom left to be on the right, opposite to the logo on the header? heres the code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackSite - Digital Collection</title>
    <link rel="icon" href="https://TrackSite.neocities.org/TrackSite.png" type="image/png">
    <style>
        :root {
            --primary-red: #e53935;
            --dark-bg: #121212;
            --light-bg: #1d1d1d;
            --text-primary: #f0f0f0;
            --text-secondary: #a0a0a0;
            --border-color: #333333;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            color: var(--text-primary);
            background: #000;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px 30px;
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }

        .header-logo {
            height: 30px;
            cursor: pointer;
        }

        /* Hero Section */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            min-height: 100vh;
            position: relative;
            background: linear-gradient(145deg, var(--light-bg) 0%, var(--dark-bg) 100%);
        }

        .fade-to-black {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 250px;
            background: linear-gradient(to top, #000 0%, transparent 100%);
            pointer-events: none;
            z-index: 5;
        }

        .logo-container, .prompt, .category-buttons {
            position: relative;
            z-index: 6;
        }

        .main-logo {
            width: 100px;
            margin-bottom: 15px;
        }

        .brand-name {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .brand-name span {
            color: var(--primary-red);
        }

        .prompt {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin: 35px 0 25px;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .category-buttons {
            display: flex;
            gap: 15px;
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }

        .btn {
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 500;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: var(--primary-red);
            border-color: var(--primary-red);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 40px;
            border: 2px solid #555;
            border-radius: 20px;
            cursor: pointer;
            transition: border-color 0.3s ease;
            z-index: 10;
        }

        .scroll-indicator::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            width: 4px;
            height: 4px;
            background: var(--text-secondary);
            border-radius: 50%;
            transform: translateX(-50%);
            animation: scroll-down 2.2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .scroll-indicator:hover {
            border-color: var(--primary-red);
        }

        .info-icon {
            position: fixed;
            bottom: 25px;
            left: 25px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .info-icon:hover {
            border-color: var(--primary-red);
            color: #fff;
            transform: scale(1.1);
        }

        .bottom-content {
            background-color: #000;
            padding: 80px 20px 0;
        }

        .content-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .content-container h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-red);
            margin-bottom: 15px;
        }

        .content-container p {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: 30px;
        }

        /* Kinetic Footer with Wave Animation */
        .kinetic-footer {
            width: 100%;
            padding: 80px 0 60px;
            overflow: hidden;
            position: relative;
        }

        .binary-wave-container {
            position: relative;
            height: 140px;
            width: 100%;
        }

        .wave-line {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            white-space: nowrap;
        }

        .wave-line span {
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            color: var(--primary-red);
            opacity: 0.6;
            margin: 0 1px;
            will-change: transform, opacity;
        }

        .wave-line:nth-child(1) { bottom: 60px; }
        .wave-line:nth-child(2) { bottom: 40px; }
        .wave-line:nth-child(3) { bottom: 20px; }

        .duck {
            position: absolute;
            width: 60px;
            pointer-events: none;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes scroll-down {
            0% { transform: translate(-50%, 0); opacity: 0; }
            40% { opacity: 1; }
            80% { transform: translate(-50%, 15px); opacity: 0; }
            100% { opacity: 0; }
        }

        /* Mobile Responsiveness */
        @media (max-width: 600px) {
            .header { padding: 12px 15px; }
            .header-logo { height: 24px; }
            .main-logo { width: 70px; }
            .brand-name { font-size: 1.8rem; }
            .prompt { font-size: 0.9rem; }
            .btn { padding: 8px 20px; font-size: 0.85rem; }
            .category-buttons { gap: 10px; }
            .kinetic-footer { padding: 60px 0 50px; }
            .wave-line span { font-size: 14px; margin: 0 0.5px; }
            .duck { width: 40px; bottom: 70px; }
        }
    </style>
</head>
<body>
    <header class="header">
        <img src="https://TrackSite.neocities.org/TrackSite.png" alt="TrackSite Logo" class="header-logo" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
    </header>

    <main class="hero">
        <div class="logo-container">
            <img src="https://TrackSite.neocities.org/TrackSite.png" alt="TrackSite Logo" class="main-logo">
            <h1 class="brand-name">TRACK<span>SITE</span></h1>
        </div>
        <p class="prompt">Looking For:</p>
        <div class="category-buttons">
            <button class="btn" onclick="selectCategory('gaming')">Gaming</button>
            <button class="btn" onclick="selectCategory('media')">Media</button>
        </div>
        <div class="scroll-indicator" onclick="scrollToBottom()"></div>
        <div class="fade-to-black"></div>
    </main>

    <section class="bottom-content">
        <div class="content-container">
            <h2>What is TrackSite?</h2>
            <p>Welcome to TrackSite. This website was made for myself to track things, that's why it's called TrackSite. This site was designed to track things like modlists I made for games, extensions that're useful, and other apps and tweaks that're otherwise noteworthy.</p>
            <h2>Why are some buttons filled but others are outlined?</h2>
            <p>If you see outlined buttons next to a filled button it means that the outlined button is dependent on the button to the left of it that isn't outlined. (The reason why the buttons on the Homepage and footer are outlined is because it looks better).</p>
            <h2>Why are you still reading?</h2>
            <p>This is the end of the Homepage.</p>
        </div>

        <footer class="kinetic-footer">
            <div class="binary-wave-container" id="binary-wave-container">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngall.com%2Fwp-content%2Fuploads%2F11%2FRubber-Duck-PNG-HD-Image.png&f=1&nofb=1&ipt=abb491d925741f38a4e41ffcfde5244f0e87d7f29fcfa438a957b356ff785cdd" class="duck" id="duck">
            </div>
        </footer>
    </section>

    <div class="info-icon" onclick="showInfo()">i</div>

    <script>
        function selectCategory(category) {
            console.log('Navigating to:', category);
        }

        function scrollToBottom() {
            document.querySelector('.bottom-content').scrollIntoView({ behavior: 'smooth' });
        }

        function showInfo() {
            alert(`Tracksite Info

Last Site Update: 5.31.25
Site Creation Start: Early 2024`);
        }

        // Wave Animation
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('binary-wave-container');
            const duck = document.getElementById('duck');

            const lines = 3;
            const charCount = 120;
            const waveHeight = 10;
            const waveLength = 0.25;
            const waveSpeed = 0.05;
            const ampOp = 0.2;
            const lineSpacing = 20;

            const rows = [];

            for (let r = 0; r < lines; r++) {
                const line = document.createElement('div');
                line.className = 'wave-line';
                line.style.bottom = `${60 - r * lineSpacing}px`;
                container.appendChild(line);

                const spans = [];
                for (let i = 0; i < charCount; i++) {
                    const s = document.createElement('span');
                    s.textContent = Math.random() > 0.5 ? '1' : '0';
                    line.appendChild(s);
                    spans.push(s);
                }

                rows.push({ spans, offset: r * 0.7 });
            }

            let t = 0;
            function anim() {
                rows.forEach(({ spans, offset }) => {
                    spans.forEach((s, i) => {
                        const y = Math.sin(t + offset + i * waveLength) * waveHeight;
                        s.style.transform = `translateY(${y}px)`;
                        s.style.opacity = 0.6 + Math.sin(t + offset + i * waveLength) * ampOp;
                    });
                });

                // Duck bobbing animation
                const duckIndex = 60;
                const dy = Math.sin(t + rows[1].offset + duckIndex * waveLength) * (waveHeight - 4);
                duck.style.transform = `translate(-50%, ${dy - 12}px)`;

                t += waveSpeed;
                requestAnimationFrame(anim);
            }

            anim();
        });
    </script>
</body>
</html>