<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>thelucidityrecords</title>
    <style>
        @font-face {
            font-family: 'lucidity';
            src: url('C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/fonts/lucidity.ttf') format('truetype');
            
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: 'lucidity', Arial, sans-serif;
            overflow: hidden;
            position: relative;
            background-color: black;
            font-size: 1rem; 
            
        }
        .container { 
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .title {
            font-size: 10vh; 
            margin-bottom: 2vh; 
            color: black;
            display: inline-block;
            font-weight: normal;
            
        }

        .title span {
            display: inline-block;
            color: white;
            text-shadow: -0.1vh -0.1vh 0 black, 0.1vh -0.1vh 0 black, -0.1vh 0.1vh 0 black, 0.1vh 0.1vh 0 black;
            opacity: 0; 
            animation: letterFadeIn 0.5s ease forwards; 
            position: relative; 
        }
        
        .title span:nth-child(1) { animation-delay: 1.6s; }
        .title span:nth-child(2) { animation-delay: 1.9s; }
        .title span:nth-child(3) { animation-delay: 2.2s; }
        .title span:nth-child(4) { animation-delay: 0s; }
        .title span:nth-child(5) { animation-delay: 0.2s; }
        .title span:nth-child(6) { animation-delay: 0.4s; }
        .title span:nth-child(7) { animation-delay: 0.6s; }
        .title span:nth-child(8) { animation-delay: 0.8s; }
        .title span:nth-child(9) { animation-delay: 1s; }
        .title span:nth-child(10) { animation-delay: 1.2s; }
        .title span:nth-child(11) { animation-delay: 1.4s; }
        .title span:nth-child(12) { animation-delay: 2.2s; }
        .title span:nth-child(13) { animation-delay: 2.1s; }
        .title span:nth-child(14) { animation-delay: 2s; }
        .title span:nth-child(15) { animation-delay: 1.9s; }
        .title span:nth-child(16) { animation-delay: 1.8s; }
        .title span:nth-child(17) { animation-delay: 1.7s; }
        .title span:nth-child(18) { animation-delay: 1.6s; }

        
        .title span::before, 
        .new-title span::before { 
            content: attr(data-text); 
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1; 
            color: white;
            text-shadow: 0 0 1vw white, 0 0 2vw white, 0 0 3vw white;
            opacity: 0;
            animation: glowFadeIn 0.5s ease forwards; 
        }

        
        .title span:nth-child(1)::before,
        .new-title span:nth-child(1)::before { animation-delay: 1.6s; } 
        .title span:nth-child(2)::before,
        .new-title span:nth-child(2)::before { animation-delay: 1.9s; }
        .title span:nth-child(3)::before,
        .new-title span:nth-child(3)::before { animation-delay: 2.2s; }
        .title span:nth-child(4)::before,
        .new-title span:nth-child(4)::before { animation-delay: 0s; }
        .title span:nth-child(5)::before,
        .new-title span:nth-child(5)::before { animation-delay: 0.2s; }
        .title span:nth-child(6)::before,
        .new-title span:nth-child(6)::before { animation-delay: 0.4s; }
        .title span:nth-child(7)::before,
        .new-title span:nth-child(7)::before { animation-delay: 0.6s; }
        .title span:nth-child(8)::before,
        .new-title span:nth-child(8)::before { animation-delay: 0.8s; }
        .title span:nth-child(9)::before,
        .new-title span:nth-child(9)::before { animation-delay: 1s; }
        .title span:nth-child(10)::before,
        .new-title span:nth-child(10)::before { animation-delay: 1.2s; }
        .title span:nth-child(11)::before,
        .new-title span:nth-child(11)::before { animation-delay: 1.4s; }
        .title span:nth-child(12)::before,
        .new-title span:nth-child(12)::before { animation-delay: 2.2s; }
        .title span:nth-child(13)::before,
        .new-title span:nth-child(13)::before { animation-delay: 2.1s; }
        .title span:nth-child(14)::before,
        .new-title span:nth-child(14)::before { animation-delay: 2s; }
        .title span:nth-child(15)::before,
        .new-title span:nth-child(15)::before { animation-delay: 1.9s; }
        .title span:nth-child(16)::before,
        .new-title span:nth-child(16)::before { animation-delay: 1.8s; }
        .title span:nth-child(17)::before,
        .new-title span:nth-child(17)::before { animation-delay: 1.7s; }
        .title span:nth-child(18)::before,
        .new-title span:nth-child(18)::before { animation-delay: 1.6s; }

       
       
        


        .button-container {
            display: flex;
            align-items: center;
            justify-content: center; 
            width: 100%;
            position: fixed; 
            bottom: 8vh; 
            opacity: 0;
            animation: fadeIn 5s ease forwards; 
            animation-delay: 5s;
            font-size: 2vh;
             
        }
        
        .button-frame.theme { 
            flex-direction: column; 
        }
        .button {
            cursor: pointer;
            font-size: 2vh; 
            text-decoration: none;
            color: white;
            transition: color 0.3s ease; 
            animation: buttonPulse 1.5s ease-in-out infinite; 
        }
       
        .button-frame.character:hover .button {
        
            animation: none; 
            text-shadow: 0 0 1vw white; 
        }
    
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes letterFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes glowFadeIn { 
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .background-container { 
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0; 
            
        }
        .footer {
            position: fixed;
            bottom: 1vh; 
            width: 100%;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 0.8vh; 
            color: rgb(131, 130, 130);
            text-shadow: 0 0 1vw black, 0 0 2vw black, 0 0 3vw black; 
            opacity: 0; 
            animation: footerFadeIn 10s ease forwards; 
            animation-delay: 4s; 
        }
      
        @keyframes footerFadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        
        @keyframes titleFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .title-container { 
            animation: titleFadeOut 0.3s ease forwards;
            animation-delay: 4s; 
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5vh; 
                    
        }

        /* Title Frame Styles */
        .title-frame {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% + 2vh); 
            height: calc(12vh + 2vh); 
            padding: 1vh; 
            border: 0.2vh solid white; 
            border-radius: 0.5vh; 
            box-shadow: 0 0 1.5vh white; 
            opacity: 0;
            animation: frameAppear 2s ease forwards 1.6s,
                        frameDisappear 0.3s ease forwards 4s;
            pointer-events: none;
        }

        @keyframes frameAppear {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        @keyframes frameDisappear {
          0% { opacity: 1; }
          100% { opacity: 0; }
        }

        
        .new-title-frame { 
            position: fixed; 
            top: 8vh; 
            left: 50%;
            transform: translateX(-50%); 
            padding: 1vh; 
            border: 0.2vh solid white; 
            border-radius: 0.5vh; 
            box-shadow: 0 0 1.5vh white; 
            opacity: 0;
            animation: newTitleFadeIn 2.5s ease forwards;
            animation-delay: 4s; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
             }

        .new-title {
            font-size: 2vh; 
            color: black;  
            display: inline-block; 
            white-space: nowrap;
        }

        .new-title span { 
            display: inline-block;
            color: white; 
            text-shadow: -0.1vh -0.1vh 0 black, 0.1vh -0.1vh 0 black, -0.1vh 0.1vh 0 black, 0.1vh 0.1vh 0 black; 
            position: relative; 
        }

        @keyframes newTitleFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes buttonPulse {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }

        /* Question Button Styles */
        .question-button-container {
            position: fixed;
            top: 2vh; 
            right: 2vh; 
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 5s;
        }

        .question-button-frame {
            width: 6vh; 
            height: 6vh; 
            border: 0.2vh solid white; 
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; 
            transition: background-color 0.3s ease, color 0.3s ease; 
            position: relative; /* Added for positioning the caption */
        }

        .question-button {
            font-size: 5vh; 
            color: white;
            transition: color 0.3s ease;
        }

        .question-button-frame:hover {
            background-color: white;
        }

        .question-button-frame:hover .question-button {
            color: black;
        }

        .question-caption {
            position: absolute;
            top: 50%;
            left: -13.5vh; /* Adjust as needed */
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; /* Prevent caption from wrapping */
            border-top: 0.2vh solid white;
            border-bottom: 0.2vh solid white;
            border-left: 0.2vh solid white;
            height: 6vh;
            right: 6vh;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            padding-left: 1vh; /* Add left padding for margin */
        }

        .question-button-frame:hover .question-caption {
            opacity: 1;
        }


        /* Contact Button Styles */
        .contact-button-container {
            position: fixed;
            top: 9vh; 
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 5s;
        }

        .contact-button-frame {
            width: 6vh; 
            height: 6vh; 
            border: 0.2vh solid white; 
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; 
            transition: background-color 0.3s ease, color 0.3s ease;
            position: relative; /* Added for positioning the caption */
        }

        .contact-button {
            font-size: 5vh; 
            color: white;
            transition: color 0.3s ease;
        }

        .contact-button-frame:hover {
            background-color: white;
        }

        .contact-button-frame:hover .contact-button {
            color: black;
        }

        .contact-caption {
            position: absolute;
            top: 50%;
            left: -13.5vh; /* Adjust as needed */
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; /* Prevent caption from wrapping */
            border-top: 0.2vh solid white;
            border-bottom: 0.2vh solid white;
            border-left: 0.2vh solid white;
            height: 6vh;
            right: 6vh; 
            top: 50%; /* Position at the vertical center */
            transform: translateY(-50%); /* Vertically center the text */
            display: flex;
            align-items: center;
            padding-left: 1vh;
        }

        .contact-button-frame:hover .contact-caption {
            opacity: 1;
        }

        .background-container { 
            /* ... (Your existing background styles) ... */
            animation: hueRotate 0.06s linear infinite; 
        }

        @keyframes hueRotate {
            from { filter: hue-rotate(0deg); }
            to { filter: hue-rotate(360deg); }
        }

        /* Text Box Styles */
        .text-box-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* Dimmed background */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none; /* Prevent interaction when hidden */
            transition: opacity 0.5s ease;
        }

        .text-box {
            background-color: black;
            color: white;
            padding: 2vh;
            border: 0.2vh solid white;
            border-radius: 0.5vh;
            max-width: 80%; /* Adjust as needed */
            text-align: justify;
            font-size: 2vh;
            display: flex; /* Make text-box a flex container */
            flex-direction: column; /* Stack content vertically */
            align-items: flex-start; /* Align content to the top left */ 
        }

        .text-box-container.show {
            opacity: 1;
            pointer-events: auto; /* Allow interaction when shown */
        }

        /* Button Group Styles */
        .button-group {
            display: flex;
            justify-content: space-between; /* Distribute space between buttons */
            align-items: center;
            width: 100%;
        }

        /* OK Button Styles */
        .ok-button {
            background-color: black;
            color: white;
            border: 0.2vh solid white;
            padding: 0.5vh 1vh;
            margin-left: auto; /* Push the button to the right */
            margin-right: auto; /* Push the button to the left (this centers it) */
            margin-top: 1vh; /* Add top margin */
            cursor: pointer;
            font-size: 1.5vh; 
            transition: background-color 0.3s ease, color 0.3s ease; /* Add transition */
            display: block;
        }

        .ok-button:hover {
            background-color: white;
            color: black;
        }

        /* Zoom Button Styles */
        .zoom-button {
            background-color: black;
            color: white;
            border: 0.2vh solid white;
            padding: 0.5vh 1vh;
            margin-top: 1vh;
            margin-left: 0.5vh; /* Add some spacing between buttons */
            cursor: pointer;
            font-size: 1.5vh;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .zoom-button:hover {
            background-color: white;
            color: black;
        }

        

        .zoom-buttons {
            display: flex; /* Keep zoom buttons together */
        }
    </style>
</head>
<body>

    <div class="background-container" id="background"></div>

    <div class="container">
        <div class="title-container"> 
            <div class="title-frame"></div> 
            <div class="title">
                <span data-text="t">t</span>
                <span data-text="h">h</span>
                <span data-text="ɘ">ɘ</span>
                <span data-text="l">l</span>
                <span data-text="u">u</span>
                <span data-text="ɔ">ɔ</span>
                <span data-text="i">i</span>
                <span data-text="d">d</span>
                <span data-text="i">i</span>
                <span data-text="t">t</span>
                <span data-text="y">y</span>
                <span data-text="r">r</span>
                <span data-text="ɘ">ɘ</span>
                <span data-text="ɔ">ɔ</span>
                <span data-text="o">o</span>
                <span data-text="r">r</span>
                <span data-text="d">d</span>
                <span data-text="ƨ">ƨ</span>
            </div>
        </div> 
    </div>

    <div class="button-container">
        <div class="button-frame character">
            <a href="modescreen.html" class="button">
                <span class="word-character">PRESS TO START</span>
            </a>
        </div>
    </div>

    <div class="new-title-frame">
        <div class="new-title">
            <span data-text="t">t</span>
            <span data-text="h">h</span>
            <span data-text="ɘ">ɘ</span>
            <span data-text="l">l</span>
            <span data-text="u">u</span>
            <span data-text="ɔ">ɔ</span>
            <span data-text="i">i</span>
            <span data-text="d">d</span>
            <span data-text="i">i</span>
            <span data-text="t">t</span>
            <span data-text="y">y</span>
            <span data-text="r">r</span>
            <span data-text="ɘ">ɘ</span>
            <span data-text="ɔ">ɔ</span>
            <span data-text="o">o</span>
            <span data-text="r">r</span>
            <span data-text="d">d</span>
            <span data-text="ƨ">ƨ</span>
        </div>
    </div>

    <!-- Question Button -->
    <div class="question-button-container">
        <div class="question-button-frame" onclick="showTextBox()"> 
            <span class="question-button">�</span>
            <span class="question-caption">What is this?</span> 
        </div>
    </div>

    <!-- Contact Button -->
    <div class="contact-button-container">
        <div class="contact-button-frame" onclick="showContactBox()"> 
            <span class="contact-button">@</span> 
            <span class="contact-caption">Contact</span>
        </div>
    </div>

    <!-- Text Box -->
    <div class="text-box-container" id="textBox">
        <div class="text-box">
            <div id="text-content"> 
                Movies, novels, videogames... they sometimes involve memorable characters with amazingly deep personalities that continue to surprise and fascinate every time one dives back into their universe. When it comes to such characters, the work of fiction that gave birth to them may not be enough to satiate ones thirst to learn more about them and how they view the world. This website aims to remedy this.<br><br>

                With the advent of LLMs (Large language Models) and their ability to crunch thousands of pages of content in mere seconds absorb everything within them, it became immediately clear to many that this formidable can be used to simulate the personalities of fictional (and even real) people with that may even exceed that of their origjnal author.Indeed, a human writer may onyl keep so much in mind when composing a dialogue or a reponse involving a fictional charavter, and some aspects of the personality of said character may even escape its creator, especially when dealing with very complex works expansive fictional universes. I bleieve it is not unreasonable to surmise that an LLM fed with every bit of data possible about a given fictional charavter may succeed in portraying that character better than its original author, and simulate his or her would-be answers more accurately.
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideTextBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomText('+')">+</button>
                    <button class="zoom-button" onclick="zoomText('-')">-</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Box -->
    <div class="text-box-container" id="contactBox">
        <div class="text-box">
            <div id="contact-content">
                The author of this website can be reached at the following address: thelucidityrecords@proton.mail 
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideContactBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomContactText('+')">+</button>
                    <button class="zoom-button" onclick="zoomContactText('-')">-</button>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">© 2025 TheLucidityRecords. All rights reserved.</div>

    <script>
        const randomNumber = Math.floor(Math.random() * 4) + 1;

        const backgroundContainer = document.getElementById('background');
        backgroundContainer.style.backgroundImage = `url('C:/Users/PC/Desktop/guest/WEB BUILD/lucidity/images/lucidity${randomNumber}.png')`;

        window.addEventListener('load', () => {
            setTimeout(() => {
                requestAnimationFrame(() => {
                    backgroundContainer.style.opacity = '1';
                    backgroundContainer.style.transition = 'opacity 2.5s ease-in-out';
                });
            }, 4000);
        });

        function adjustLayout() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        window.addEventListener('resize', adjustLayout);
        adjustLayout(); 

        const textBoxContainer = document.getElementById('textBox');
        const contactBoxContainer = document.getElementById('contactBox');

        function showTextBox() {
            textBoxContainer.classList.add('show');
        }

        function hideTextBox() {
            textBoxContainer.classList.remove('show');
        }

        function showContactBox() {
            contactBoxContainer.classList.add('show');
        }

        function hideContactBox() {
            contactBoxContainer.classList.remove('show');
        }

        let textSize = 2; // Initial font size in vh
        let contactTextSize = 2; // Initial font size for contact box

        function zoomText(action) {
            const textContent = document.getElementById('text-content');

            if (action === '+') {
                textSize += 0.2; 
            } else if (action === '-') {
                textSize -= 0.2;
                if (textSize < 1) { 
                    textSize = 1;
                }
            }

            textContent.style.fontSize = textSize + 'vh';
        }

        function zoomContactText(action) {
            const contactContent = document.getElementById('contact-content');

            if (action === '+') {
                contactTextSize += 0.2;
            } else if (action === '-') {
                contactTextSize -= 0.2;
                if (contactTextSize < 1) {
                    contactTextSize = 1;
                }
            }

            contactContent.style.fontSize = contactTextSize + 'vh';
        }
    </script>
</body>
</html>

I want the "ok" button perfectly centered horizontally without taking into account any other buttons to its right. full html