The bottom buttons must not collide with each other when i keep zooming. if there is not enough space and they're about to collide, they must not grow anymyre

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Viewer</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        body {
            display: flex;
            font-family: 'lucidity', Arial, sans-serif;
            background-color: black;
            color: white;
            transform-origin: top left; /* Ensures scaling starts from top-left */
        }

        @font-face {
            font-family: 'lucidity';
            src: url('C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/fonts/lucidity.ttf') format('truetype');
        }

        .left-half,
        .right-half {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Ensures space between top content and bottom buttons */
            /* Removed align-items: center to prevent vertical misalignment */
        }

        .left-half {
            padding: 1vh 0.5vh 1vh 1vh;
            /* Removed max-width: 50%; to align with reference code */
            overflow-x: hidden; /* Hide overflowing content */
        }

        .right-half {
            padding: 1vh 1vh 1vh 0.5vh;
            justify-content: center;
        }

        .button-group {
            flex-grow: 1;
            overflow-y: auto;
            scrollbar-width: none;
            /* Optional: Hide scrollbars for a cleaner look */
        }

        .image-space {
            width: 100%;
            height: 100%;
            border: 0.1vh solid white;
            overflow: hidden;
            box-sizing: border-box; /* Ensures padding and borders are included */
        }

        .image-space img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            animation: fadeIn 3s forwards;
            box-sizing: border-box; /* Ensures padding and borders are included */
        }

        .image-space video {
            width: 100%;
            height: 103.5%;
            object-fit: cover;
            animation: fadeIn 3s forwards;
            box-sizing: border-box; /* Ensures padding and borders are included */
        }

        .dropdown-button {
            background-color: black;
            color: white;
            border: 0.1vh solid white;
            font-family: inherit;
            font-size: calc(3vh * var(--scale-factor)); /* Consistent scaling */
            cursor: pointer;
            padding: 1.5vh 2vh;
            width: 100%;
            text-align: left;
            opacity: 0;
            animation: fadeIn 3s forwards;
            transition: background-color 0.3s, color 0.3s;
            margin-bottom: 1.2vh;
            box-sizing: border-box; /* Includes padding in width and height */
        }

        .bottom-buttons-container {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Vertically centers the buttons */
            padding-top: 0.9vh; /* Changed from 9px to 0.9vh for responsiveness */
            padding-bottom: 0.9vh; /* Changed from 9px to 0.9vh */
            margin-bottom: -0.9vh; /* Adjusted to counteract padding and maintain position */
            width: 100%;
            gap: 1vh; /* Ensures consistent spacing between button groups */
            box-sizing: border-box; /* Includes padding in layout calculations */
        }

        .bottom-button:not(:last-child) {
            border-right: 0.1vh solid white;
        }

        .bottom-button {
            padding: calc(1vh * var(--scale-factor)) calc(2vh * var(--scale-factor)); /* Proportional scaling */
            font-size: calc(2vh * var(--scale-factor)); /* Unified scaling with --scale-factor */
            color: white;
            background-color: black;
            border: 0.1vh solid white;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            display: flex;
            align-items: center;
            justify-content: center; /* Centers content horizontally */
            line-height: 1.2;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box; /* Includes padding and border in dimensions */
        }

        .up-down-buttons {
            display: flex;
            gap: 1vh;
        }

        .home-chat-buttons {
            display: flex;
            gap: 1vh;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .dropdown-button:hover,
        .bottom-button:hover {
            background-color: white;
            color: black;
        }

        .caption {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: black;
            color: white;
            padding: 1vh 2vh;
            border-radius: 0.5vh;
            font-size: calc(3vh * var(--scale-factor)); /* Consistent scaling */
            z-index: 2;
            display: none;
            box-sizing: border-box; /* Includes padding in dimensions */
        }

        .caption.show {
            display: block;
            animation: flicker 1s linear 3;
        }

        @keyframes flicker {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .dropdown-button:nth-child(n+2) {
            animation-delay: calc((var(--delay) - 1) * 0.5s);
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: auto;
            background-color: white;
            color: black;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px;
            position: absolute;
            z-index: 1;
            bottom: 115%;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* Accessibility: Focus styles */
        .bottom-button:focus {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

    </style>
</head>

<body onload="loadMedia(); loadButtons(); adjustLayout(); adjustButtonHeights()">
    <div class="left-half">
        <div class="button-group" id="button-group"></div>
        <div class="bottom-buttons-container">
            <div class="tooltip">
                <button class="bottom-button" onclick="window.location.href='../charselect.html'">◀</button>
                <span class="tooltiptext">Back</span>
            </div>
            <div class="up-down-buttons">
                <button class="bottom-button" onclick="scrollUp()">▲</button>
                <button class="bottom-button" onclick="scrollDown()">▼</button>
            </div>
            <div class="home-chat-buttons">
                <div class="tooltip">
                    <button class="bottom-button"
                        onclick="window.location.href='C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/landing.html'">⟲</button>
                    <span class="tooltiptext">Main screen</span>
                </div>
                <div class="tooltip">
                    <button class="bottom-button" id="chat-button">⌨</button>
                    <span class="tooltiptext">Chat</span>
                </div>
            </div>
        </div>
    </div>
    <div class="right-half">
        <div class="image-space" id="image-space"></div>
    </div>

    <div id="caption" class="caption"></div>

    <script>
        const questions = [
            { text: "Do you believe there is a higher power or force at work in the conflict between humans and machines?", link: "../questions/morpheus/morpheusdybtiahpoawitcbham.html" },
            { text: "Do you have any doubts about the prophecy or Neo's role as \"The One\"?", link: "../questions/morpheus/morpheusdyhadatorno.html" },
            { text: "Do you know about the Oracle's deal with the Merovingian to save Sati?", link: "../questions/morpheus/morpheusdykatodwts.html" },
            { text: "How did you acquire the Nebuchadnezzar?", link: "../questions/morpheus/morpheushdyatn.html" },
            { text: "How did you escape the Matrix?", link: "../questions/morpheus/morpheushdyetm.html" },
            { text: "What are your long-term goals for humanity?", link: "../questions/morpheus/morpheuswaygfh.html" },
            { text: "What are your thoughts on the Oracle's methods?", link: "../questions/morpheus/morpheuswayotom.html" },
            { text: "What did the Oracle specifically tell you about the previous five \"Ones\"?", link: "../questions/morpheus/morpheuswdtostyatpfo.html" },
            { text: "What is your personal philosophy on the nature of reality?", link: "../questions/morpheus/morpheuswiypotno.html" },
            { text: "What was the turning point for you after the fifth \"One\" died?", link: "../questions/morpheus/morpheuswttfyaftffo.html" }
        ];

        // Sort questions alphabetically
        questions.sort((a, b) => a.text.localeCompare(b.text));

        function loadButtons() {
            const buttonGroup = document.getElementById('button-group');
            let delay = 1;
            questions.forEach(question => {
                const button = document.createElement('button');
                button.classList.add('dropdown-button');
                button.textContent = question.text;
                button.style.setProperty('--delay', delay);
                button.onclick = () => {
                    window.location.href = question.link;
                };
                buttonGroup.appendChild(button);
                delay++;
            });
        }

        window.addEventListener('load', loadButtons);


        function loadMedia() {
            const imageSpace = document.getElementById('image-space');
            const video = document.createElement('video');
            video.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/morpheus2.mp4';
            video.autoplay = true;
            video.muted = true;

            imageSpace.appendChild(video);

            video.addEventListener('ended', () => {
                video.style.display = 'none';

                const img = new Image();
                img.src = 'C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/morpheus2.png';
                img.onload = () => {
                    imageSpace.appendChild(img);
                };
            });
        }

        function scrollUp() {
            const buttonGroup = document.querySelector('.left-half .button-group');
            const vh = window.innerHeight * 0.01;
            buttonGroup.scrollTop -= 5 * vh;
        }

        function scrollDown() {
            const buttonGroup = document.querySelector('.left-half .button-group');
            const vh = window.innerHeight * 0.01;
            buttonGroup.scrollTop += 5 * vh;
        }

        const chatButton = document.getElementById('chat-button');
        const captionElement = document.getElementById('caption');

        chatButton.addEventListener('click', () => {
            captionElement.textContent = "This feature is not available yet";
            captionElement.classList.add('show');

            setTimeout(() => {
                captionElement.classList.remove('show');
            }, 3000);
        });

        function adjustLayout() {
            const zoomLevel = window.devicePixelRatio;
            const newScaleFactor = 1 * zoomLevel;

            /* Apply the same scale factor to both main and bottom buttons */
            document.documentElement.style.setProperty('--scale-factor', newScaleFactor);
        }

        function adjustButtonHeights() {
            const buttons = document.querySelectorAll('.bottom-button');
            let maxHeight = 0;

            buttons.forEach(button => {
                // Reset height to auto to get the natural height
                button.style.height = 'auto';
                if (button.offsetHeight > maxHeight) {
                    maxHeight = button.offsetHeight;
                }
            });

            // Set all buttons to the maximum height
            buttons.forEach(button => {
                button.style.height = `${maxHeight}px`;
            });
        }

        // Debounce function to optimize resize events
        function debounce(func, wait) {
            let timeout;
            return function (...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func.apply(this, args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        window.addEventListener('resize', debounce(() => {
            adjustLayout();
            adjustButtonHeights();
        }, 150));

        // Initial adjustments on load
        window.addEventListener('load', () => {
            adjustLayout();
            adjustButtonHeights();
        });
    </script>
</body>

</html>