Збільши тут
шрифт у першому стовпчику слово час що є
тому що воно не збільшується я збільшую Пікселі його збільшує але воно не збільшується знайди спосіб Який його збільшити але функціонал має залишитися повністю як нічого не викидай з коду все має залишитись на місці абсолютно повністю тільки оцю зміну внеси
зроби одним способом тому що може не получитися за першим разом тому зроби тут один спосіб а у стовпчику чотири застосуй інший метод
який на твою думку буде ефективний і Збільши Також там шрифт там зроби 50 у першому 50 пікселів у другому 50 пікселів тому що зараз там пише Багато пікселів але він виглядає десь як 15 Пікселів
<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Ізольована SVG-анімація</title> 
    <style>
        .animation-container-1 { 
            width: 100%; 
            margin: 0;
        }
        svg {
            width: 100%;
            height: auto;
        }
        .column-label {
            font-size: 14px;
            text-anchor: middle;
        }
        .white-text {
            fill: white;
        }
        .black-text {
            fill: black;
        }
        .bright-blue-text {
            fill: #00BFFF;
        }
        .hidden {
            visibility: hidden;
        }
        #start-button-animation1 {
            cursor: pointer;
        }
        .time-label {
            font-size: 50px; 
            text-anchor: middle;
        }
        /* Додаємо стиль для батьківського елемента */
        .controls > g[transform="translate(-86, -22)"] {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="animation-container-1" class="animation-container-1">
        <svg id="my-svg" viewBox="0 0 800 370" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <linearGradient id="columnGradient" x1="0" y1="164" x2="0" y2="2" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#7CFC00" />
                    <stop offset="30%" stop-color="#7CFC00" />
                    <stop offset="45%" stop-color="yellow" />
                    <stop offset="55%" stop-color="yellow" />
                    <stop offset="70%" stop-color="red" />
                    <stop offset="100%" stop-color="red" />
                </linearGradient>
            </defs>

            <rect width="800" height="370" fill="#1a1a2e"/> 

            <g id="column1">
                <rect id="column1-fill" x="2" y="164" width="50" height="0" fill="url(#columnGradient)"></rect>
                <rect x="2" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <text id="column1-text" x="27" y="50" class="time-label black-text">3</text>
                <text id="column1-text-2" x="27" y="100" class="time-label black-text hidden">2</text> 
                <text x="27" y="180" class="column-label white-text">1</text>
                <text x="27" y="150" class="column-label black-text" font-size="100">ЧАС</text> 
            </g>

            <rect x="107" y="2" width="65" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="140" y="180" class="column-label white-text">2</text>

            <rect x="212" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="237" y="180" class="column-label white-text">3</text>

            <g id="column4">
                <rect id="column4-fill" x="317" y="164" width="75" height="0" fill="url(#columnGradient)"></rect>
                <rect x="317" y="2" width="75" height="162" fill="none" stroke="white" stroke-width="1"/>
                <text x="355" y="180" class="column-label white-text">4</text>
                <text id="column4-text" x="355" y="150" class="column-label black-text" font-size="100">ЗБІЙ</text> 
            </g>

            <rect x="422" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="447" y="180" class="column-label white-text">5</text>

            <rect x="527" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="552" y="180" class="column-label white-text">6</text>

            <g class="controls" transform="translate(400, 323.6)"> 
                <g transform="translate(0, 5)">
                </g>

                <g transform="translate(-86, -22)"> 
                    <g id="start-button-animation1">
                        <rect x="-125" y="26" width="250" height="40" fill="#a62020" stroke="#01FEFE" stroke-width="2" rx="5" ry="5"/> 
                        <text x="-110" y="51" text-anchor="start" dominant-baseline="middle" fill="#01FEFE" font-size="34" stroke="#01FEFE" stroke-width="2" font-family="Haettenschweiler">START</text>
                    </g>
                    <rect x="0" y="26" width="120" height="40" fill="none" rx="5" ry="5"/>
                    <text id="timer-animation1" x="10" y="51" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" dominant-baseline="middle" font-family="Haettenschweiler">-05:00</text> 
                </g>
            </g>

            <line x1="628.68" y1="0" x2="628.68" y2="370" stroke="red" stroke-width="3" /> 
            <line x1="628.68" y1="167" x2="0" y2="167" stroke="#0000FF" stroke-width="3"></line> 
            <line x1="714.34" y1="79" x2="714.34" y2="0" stroke="red" stroke-width="3" />
            <line x1="628.68" y1="79" x2="800" y2="79" stroke="red" stroke-width="3" /> 
        </svg>
    </div> 

    <script>
    (function() {
        const svg = document.getElementById('my-svg');
        let timerInterval;
        let startTime;
        let animationInProgress = false;

        function startAnimation() {
            resetAnimation();

            animationInProgress = true;
            startTime = Date.now();
            clearInterval(timerInterval);
            timerInterval = setInterval(updateTimer, 10);

            setTimeout(animateColumn1, 5000); 
            setTimeout(animateColumn4, 5000);

            setTimeout(function() {
                const column1Text = svg.getElementById('column1-text');
                if (column1Text) {
                    column1Text.classList.remove('black-text');
                    column1Text.classList.add('white-text');
                }

                const column1Text2 = svg.getElementById('column1-text-2');
                if (column1Text2) {
                    column1Text2.classList.remove('hidden');
                }
            }, 8000);

            setTimeout(function() {
                const column1Text2 = svg.getElementById('column1-text-2'); 
                if (column1Text2) {
                    column1Text2.classList.remove('black-text');
                    column1Text2.classList.add('white-text');
                }
            }, 14500);

            setTimeout(() => {
                animationInProgress = false;
                clearInterval(timerInterval);
            }, 15000); 
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.getElementById('timer-animation1').textContent = '-05:00'; 

            let column1Fill = svg.getElementById('column1-fill');
            if (column1Fill) {
                column1Fill.setAttribute('y', '164');
                column1Fill.setAttribute('height', '0');
            }

            let column4Fill = svg.getElementById('column4-fill');
            if (column4Fill) {
                column4Fill.setAttribute('y', '164');
                column4Fill.setAttribute('height', '0');
            }


            const column1Text = svg.getElementById('column1-text');
            if (column1Text) {
                column1Text.classList.remove('white-text');
                column1Text.classList.add('black-text');
            }

            const column1Text2 = svg.getElementById('column1-text-2'); 
            if (column1Text2) {
                column1Text2.classList.remove('white-text');
                column1Text2.classList.add('black-text');
                column1Text2.classList.add('hidden');
            }

            const column4Text = svg.getElementById('column4-text');
            if (column4Text) {
                column4Text.classList.remove('white-text');
                column4Text.classList.add('black-text');
            }
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000 - 5;
            
            if (elapsedTime >= 10.00) { 
                clearInterval(timerInterval);
                svg.querySelector('#timer-animation1').textContent = '10:00'; 
            } else {
                const seconds = Math.floor(elapsedTime);
                const centiseconds = Math.floor((elapsedTime - seconds) * 100);
                const formattedSeconds = seconds < 0 ? `-${Math.abs(seconds).toString().padStart(2, '0')}` : seconds.toString().padStart(2, '0');
                svg.querySelector('#timer-animation1').textContent = 
                    `${formattedSeconds}:${centiseconds.toString().padStart(2, '0')}`;
            }
        }

        function animateColumn1() {
            const duration = 3000; 
            const startTimeAnimation = Date.now();
            const column1Fill = svg.getElementById('column1-fill');
            const totalHeight = 162;
            const startY = 164;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTimeAnimation;
                const progress = Math.min(elapsed / duration, 1); 

                const newHeight = totalHeight * progress;
                const newY = startY - newHeight;

                column1Fill.setAttribute('height', newHeight);
                column1Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }

        function animateColumn4() {
            const duration = 3000; 
            const startTimeAnimation = Date.now();
            const column4Fill = svg.getElementById('column4-fill');
            const totalHeight = 162;
            const startY = 164;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTimeAnimation;
                const progress = Math.min(elapsed / duration, 1); 

                const newHeight = totalHeight * progress;
                const newY = startY - newHeight;

                column4Fill.setAttribute('height', newHeight);
                column4Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }


        // Додаємо обробник події до батьківського елемента
        const startButtonArea = svg.querySelector('.controls > g[transform="translate(-86, -22)"]');
        startButtonArea.addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>