can you modify so that Start Game is about 1cm lower down and when the human selects Start Game to download disk image, "Start Game" option changes to "Download" then returns to "Start Game" when the disk image is downloaded <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amstrad Game Selector</title>
    <style>
        /* Reset default margins and paddings */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Starry Background Canvas */
        #starfield {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: -2; /* Positioned behind other elements */
        }

        /* Twinkling Layer Canvas */
        #twinkling {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: -1; /* Slightly above the starfield */
            pointer-events: none; /* Allows clicks to pass through */
        }

        /* Main Content Styling */
        body {
            color: #ffffff;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            padding: 50px 20px;
            position: relative; /* Establishes a new stacking context */
            z-index: 1; /* Ensures content is above the canvases */
            /* Removed overflow: hidden; to allow scrolling */
        }

        /* Container for the Input Elements */
        .input-container {
            background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
            padding: 30px 40px;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            max-width: 400px;
            margin: 0 auto; /* Center the container */
        }

        /* Heading Styling */
        .input-container h2 {
            margin-bottom: 20px;
            color: #ffcc00; /* Gold color for headings */
            text-shadow: 2px 2px 4px #000;
        }

        /* Select, Input, and Button Styling */
        select, input, button {
            display: block;
            width: 100%;
            margin: 15px 0;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
        }

        select, input {
            background-color: #333333;
            color: #ffffff;
            outline: none;
            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
        }

        select option {
            background-color: #333333;
            color: #ffffff;
        }

        button {
            background-color: #00ff00;
            color: #000000;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        button:hover {
            background-color: #00e600;
            color: #ffffff;
        }

        /* Added additional margin to the Start Game button */
        .input-container button {
            margin-top: 25px; /* Increased from 15px to 25px */
        }

        /* Paragraph Styling (if any) */
        p {
            max-width: 800px;
            margin: 10px auto;
            line-height: 1.6;
            text-shadow: 1px 1px 2px #000;
        }

        /* Responsive Design for Tablets and Larger Smartphones */
        @media (max-width: 768px) {
            .input-container {
                padding: 25px 30px;
                max-width: 90%;
            }

            select, input, button {
                font-size: 14px;
                padding: 10px;
            }

            .input-container h2 {
                font-size: 1.5em;
            }
        }

        /* Responsive Design for Small Smartphones */
        @media (max-width: 480px) {
            .input-container {
                padding: 20px 20px;
            }

            select, input, button {
                font-size: 14px;
                padding: 8px;
            }

            .input-container h2 {
                font-size: 1.2em;
            }
        }
    </style>
</head>
<body>

    <!-- Starfield Canvas -->
    <canvas id="starfield"></canvas>

    <!-- Twinkling Canvas -->
    <canvas id="twinkling"></canvas>

    <!-- Input Container -->
    <div class="input-container">
        <h2>Select Amstrad Game</h2>
        <select id="gameSelect" onchange="updateCustomInput()">
            <option value="">-- Choose option --</option>
            <option value="run&quot;bomber">Play online (type run"teven" [enter])</option>
            <option value="download_teven">Download image (tevend.dsk)</option>
            <!-- Add more game options as needed -->
        </select>
        <input type="text" id="customInput" placeholder="Enter custom command (e.g., run&quot;yourgame)" style="display: none;">
        <button onclick="startGame()">Start Game</button>
    </div>

    <!-- JavaScript for Functionality -->
    <script>
        function updateCustomInput() {
            var select = document.getElementById('gameSelect');
            var customInput = document.getElementById('customInput');
            if (select.value === 'custom') {
                customInput.style.display = 'block';
                customInput.focus();
            } else {
                customInput.style.display = 'none';
            }
        }

        function startGame() {
            var select = document.getElementById('gameSelect');
            var customInput = document.getElementById('customInput');
            var param1 = 'tevend.dsk';  
            var param2;

            if (select.value === 'download_teven') {
                // Trigger download of 'teven.dsk'
                var link = document.createElement('a');
                link.href = 'tevend.dsk';
                link.download = 'tevend.dsk';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                return; // Exit the function after initiating download
            }

            if (select.value === 'custom') {
                param2 = customInput.value;
            } else {
                param2 = select.value || 'run"bomber';  // Default to Bomber if nothing is selected
            }
            // Redirect to the game page with parameters
            window.location.href = 'index2.html?param1=' + encodeURIComponent(param1) + '&param2=' + encodeURIComponent(param2);
        }

        // Starfield and Twinkling Effect JavaScript
        // (Same as used in Teven Rides Again page)
        // Get canvas elements and their contexts
        const starfield = document.getElementById('starfield');
        const twinkling = document.getElementById('twinkling');
        const starCtx = starfield.getContext('2d');
        const twinkleCtx = twinkling.getContext('2d');

        const stars = [];
        const twinkles = [];
        const numStars = 300; // Adjust number for density

        // Define clusters with centers and radii
        const clusters = [
            { x: window.innerWidth * 0.3, y: window.innerHeight * 0.3, radius: 100 },
            { x: window.innerWidth * 0.7, y: window.innerHeight * 0.5, radius: 150 },
            { x: window.innerWidth * 0.5, y: window.innerHeight * 0.8, radius: 120 }
        ];

        // Resize Canvas to Full Screen
        function resizeCanvas() {
            starfield.width = window.innerWidth;
            starfield.height = window.innerHeight;
            twinkling.width = window.innerWidth;
            twinkling.height = window.innerHeight;
            // Recalculate clusters based on new window size
            updateClusters();
            createStars();
            createTwinkles();
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas(); // Initial call

        // Update cluster positions on resize
        function updateClusters() {
            clusters[0].x = window.innerWidth * 0.3;
            clusters[0].y = window.innerHeight * 0.3;
            clusters[1].x = window.innerWidth * 0.7;
            clusters[1].y = window.innerHeight * 0.5;
            clusters[2].x = window.innerWidth * 0.5;
            clusters[2].y = window.innerHeight * 0.8;
        }

        // Create Stars with Clustering
        function createStars() {
            stars.length = 0; // Clear existing stars
            for (let i = 0; i < numStars; i++) {
                // Determine if the star is part of a cluster or background
                const isClusterStar = Math.random() < 0.6; // 60% stars in clusters
                let x, y;

                if (isClusterStar && clusters.length > 0) {
                    // Select a random cluster
                    const cluster = clusters[Math.floor(Math.random() * clusters.length)];
                    // Place star within the cluster radius
                    const angle = Math.random() * 2 * Math.PI;
                    const distance = Math.random() * cluster.radius;
                    x = cluster.x + distance * Math.cos(angle);
                    y = cluster.y + distance * Math.sin(angle);
                } else {
                    // Background star
                    x = Math.random() * starfield.width;
                    y = Math.random() * starfield.height;
                }

                stars.push({
                    x: x,
                    y: y,
                    radius: Math.random() * 1.2,
                    alpha: Math.random(),
                    color: getRandomStarColor()
                });
            }
            drawStars();
        }

        // Function to get random star colors for variety
        function getRandomStarColor() {
            const colors = ['#ffffff', '#ffe9c4', '#d4fbff', '#e0ffff'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // Draw Stars on Starfield Canvas
        function drawStars() {
            starCtx.clearRect(0, 0, starfield.width, starfield.height);
            stars.forEach(star => {
                starCtx.fillStyle = star.color;
                starCtx.globalAlpha = star.alpha;
                starCtx.beginPath();
                starCtx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
                starCtx.fill();
                starCtx.globalAlpha = 1;
            });
        }

        // Create Twinkles (subset of stars for twinkling effect)
        function createTwinkles() {
            twinkles.length = 0; // Clear existing twinkles
            for (let i = 0; i < numStars / 2; i++) { // Approximately 150 twinkles
                const twinkleStar = stars[Math.floor(Math.random() * stars.length)];
                twinkles.push({
                    x: twinkleStar.x,
                    y: twinkleStar.y,
                    radius: twinkleStar.radius,
                    alpha: Math.random(),
                    delta: 0.02 + Math.random() * 0.01 // Twinkle speed
                });
            }
            animateTwinkles();
        }

        // Animate Twinkles on Twinkling Canvas
        function animateTwinkles() {
            twinkleCtx.clearRect(0, 0, twinkling.width, twinkling.height);
            twinkles.forEach(twinkle => {
                twinkle.alpha += twinkle.delta;
                if (twinkle.alpha >= 1 || twinkle.alpha <= 0) {
                    twinkle.delta *= -1; // Reverse direction
                }
                twinkleCtx.fillStyle = '#ffffff';
                twinkleCtx.globalAlpha = twinkle.alpha;
                twinkleCtx.beginPath();
                twinkleCtx.arc(twinkle.x, twinkle.y, twinkle.radius, 0, Math.PI * 2, false);
                twinkleCtx.fill();
                twinkleCtx.globalAlpha = 1;
            });
            requestAnimationFrame(animateTwinkles); // Loop animation
        }

        // Initialize Starfield and Twinkles
        createStars();
        createTwinkles();
    </script>
</body>
</html>