<!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; */ /* Commented out to allow dynamic scaling */
            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: 2.5vh; 
            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; 
            animation: hueRotate 0.06s linear infinite; 
        }
        .footer {
            position: fixed;
            bottom: 1vh; 
            width: 100%;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 1.2vh; 
            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 {
            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: 3vh; 
            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-container {
            position: fixed;
            top: 2vh; 
            right: 2vh; 
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 4s;
        }
        .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;
        }
        .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;
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap;
            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;
        }
        .question-button-frame:hover .question-caption {
            opacity: 1;
        }

        .upcoming-button-container {
            position: fixed;
            top: 9vh; 
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 4.2s; 
        }
        .upcoming-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;
        }
        .upcoming-button {
            font-size: 5vh; 
            color: white;
            transition: color 0.3s ease;
        }
        .upcoming-button-frame:hover {
            background-color: white;
        }
        .upcoming-button-frame:hover .upcoming-button {
            color: black;
        }
        .upcoming-caption {
            position: absolute;
            top: 50%;
            left: -19.3vh; 
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; 
            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;
        }
        .upcoming-button-frame:hover .upcoming-caption {
            opacity: 1;
        }

        /* Adjusted positions */
        .references-button-container {
            position: fixed;
            top: 16vh; /* Moved above FAQ button */
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 4.4s; 
        }
        .references-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;
        }
        .references-button {
            font-size: 4vh; 
            color: white;
            transition: color 0.3s ease;
        }
        .references-button-frame:hover {
            background-color: white;
        }
        .references-button-frame:hover .references-button {
            color: black;
        }
        .references-caption {
            position: absolute;
            top: 50%;
            left: -12.5vh; 
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; 
            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;
        }
        .references-button-frame:hover .references-caption {
            opacity: 1;
        }

        .faq-button-container {
            position: fixed;
            top: 23vh; /* Moved below References button */
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 4.6s; 
        }
        .faq-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;
        }
        .faq-button {
            font-size: 5vh; 
            color: white;
            transition: color 0.3s ease;
        }
        .faq-button-frame:hover {
            background-color: white;
        }
        .faq-button-frame:hover .faq-button {
            color: black;
        }
        .faq-caption {
            position: absolute;
            top: 50%;
            left: -6vh; 
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; 
            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;
        }
        .faq-button-frame:hover .faq-caption {
            opacity: 1;
        }

        .contact-button-container {
            position: fixed;
            top: 30vh; /* Moved accordingly */
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 4.8s; 
        }
        .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;
        }
        .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: -9vh; 
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; 
            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;
        }
        .contact-button-frame:hover .contact-caption {
            opacity: 1;
        }

        .finalwords-button-container {
            position: fixed;
            top: 37vh; 
            right: 2vh;
            opacity: 0;
            animation: fadeIn 5s ease forwards;
            animation-delay: 5s; 
        }
        .finalwords-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;
        }
        .finalwords-button {
            font-size: 5vh; 
            color: white;
            transition: color 0.3s ease;
        }
        .finalwords-button-frame:hover {
            background-color: white;
        }
        .finalwords-button-frame:hover .finalwords-button {
            color: black;
        }
        .finalwords-caption {
            position: absolute;
            top: 50%;
            left: -12.5vh; 
            transform: translateY(-50%);
            font-size: 2vh;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap; 
            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;
        }
        .finalwords-button-frame:hover .finalwords-caption {
            opacity: 1;
        }

        @keyframes hueRotate {
            from { filter: hue-rotate(0deg); }
            to { filter: hue-rotate(360deg); }
        }
        .text-box-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            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%;
            text-align: justify;
            font-size: 2vh;
            display: flex;
            flex-direction: column;
            align-items: flex-start; 
        }
        .text-box-container.show {
            opacity: 1;
            pointer-events: auto; 
        }
        .button-group {
            position: relative;
            width: 100%;
            margin-top: 1vh;
        }
        .ok-button {
            background-color: black;
            color: white;
            border: 0.2vh solid white;
            padding: 0.5vh 1vh;
            cursor: pointer;
            font-size: 1.5vh; 
            transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; 
            display: block;
            margin: 1vh auto; 
        }
        .ok-button:hover {
            background-color: white;
            color: black;
        }
        .zoom-buttons {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .zoom-button {
            background-color: black;
            color: white;
            border: 0.2vh solid white;
            padding: 0.5vh 1vh;
            cursor: pointer;
            font-size: 1.5vh; 
            transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; 
            margin-left: 0.5vh;
        }
        .zoom-button:hover {
            background-color: white;
            color: black;
        }
    </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>
    <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>
    <div class="upcoming-button-container">
        <div class="upcoming-button-frame" onclick="showUpcomingBox()"> 
            <span class="upcoming-button">⚛</span> 
            <span class="upcoming-caption">Upcoming Features</span>
        </div>
    </div>
    <!-- Moved references button above FAQ button -->
    <div class="references-button-container">
        <div class="references-button-frame" onclick="showReferencesBox()"> 
            <span class="references-button">🕮</span> 
            <span class="references-caption">References</span>
        </div>
    </div>
    <div class="faq-button-container">
        <div class="faq-button-frame" onclick="showFAQBox()"> 
            <span class="faq-button">ℹ️</span> 
            <span class="faq-caption">FAQ</span>
        </div>
    </div>
    <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>
    <div class="finalwords-button-container">
        <div class="finalwords-button-frame" onclick="showFinalWordsBox()"> 
            <span class="finalwords-button">🖋</span> 
            <span class="finalwords-caption">Final Words</span>
        </div>
    </div>
    <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>
    <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="text-box-container" id="upcomingBox">
        <div class="text-box">
            <div id="upcoming-content">
                This section will contain information about upcoming features and planned updates for the website. 
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideUpcomingBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomUpcomingText('+')">+</button>
                    <button class="zoom-button" onclick="zoomUpcomingText('-')">-</button>
                </div>
            </div>
        </div>
    </div>
    <div class="text-box-container" id="faqBox">
        <div class="text-box">
            <div id="faq-content">
                This section will contain frequently asked questions and their answers.
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideFAQBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomFAQText('+')">+</button>
                    <button class="zoom-button" onclick="zoomFAQText('-')">-</button>
                </div>
            </div>
        </div>
    </div>
    <div class="text-box-container" id="referencesBox">
        <div class="text-box">
            <div id="references-content">
                This section will contain references and sources used for the website's content.
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideReferencesBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomReferencesText('+')">+</button>
                    <button class="zoom-button" onclick="zoomReferencesText('-')">-</button>
                </div>
            </div>
        </div>
    </div>
    <div class="text-box-container" id="finalWordsBox">
        <div class="text-box">
            <div id="finalwords-content">
                This section will contain final thoughts and concluding remarks.
            </div>
            <div class="button-group">
                <button class="ok-button" onclick="hideFinalWordsBox()">Ok</button>
                <div class="zoom-buttons">
                    <button class="zoom-button" onclick="zoomFinalWordsText('+')">+</button>
                    <button class="zoom-button" onclick="zoomFinalWordsText('-')">-</button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">© 2025 TheLucidityRecords. All rights reserved.</div>
    <script>
        function adjustTitleFontSize() {
            const titleElement = document.querySelector('.title');
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;
            // Calculate the font size based on the smaller of viewport width or height
            const fontSize = Math.min(viewportWidth, viewportHeight) * 0.1; // Adjust multiplier as needed
            titleElement.style.fontSize = fontSize + 'px';
        }

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

        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');
        const upcomingBoxContainer = document.getElementById('upcomingBox');
        const faqBoxContainer = document.getElementById('faqBox');
        const referencesBoxContainer = document.getElementById('referencesBox');
        const finalWordsBoxContainer = document.getElementById('finalWordsBox');
        function showTextBox() {
            textBoxContainer.classList.add('show');
        }
        function hideTextBox() {
            textBoxContainer.classList.remove('show');
        }
        function showContactBox() {
            contactBoxContainer.classList.add('show');
        }
        function hideContactBox() {
            contactBoxContainer.classList.remove('show');
        }
        function showUpcomingBox() {
            upcomingBoxContainer.classList.add('show');
        }
        function hideUpcomingBox() {
            upcomingBoxContainer.classList.remove('show');
        }
        function showFAQBox() {
            faqBoxContainer.classList.add('show');
        }
        function hideFAQBox() {
            faqBoxContainer.classList.remove('show');
        }
        function showReferencesBox() {
            referencesBoxContainer.classList.add('show');
        }
        function hideReferencesBox() {
            referencesBoxContainer.classList.remove('show');
        }
        function showFinalWordsBox() {
            finalWordsBoxContainer.classList.add('show');
        }
        function hideFinalWordsBox() {
            finalWordsBoxContainer.classList.remove('show');
        }
        let textSize = 2; 
        let contactTextSize = 2; 
        let upcomingTextSize = 2;
        let faqTextSize = 2;
        let referencesTextSize = 2;
        let finalWordsTextSize = 2;
        function zoomText(action) {
            const textContent = document.getElementById('text-content');
            const okButton = document.querySelector('#textBox .ok-button');
            const zoomButtons = document.querySelectorAll('#textBox .zoom-button');
    
            if (action === '+') {
                textSize += 0.2; 
            } else if (action === '-') {
                textSize -= 0.2;
                if (textSize < 1) { 
                    textSize = 1;
                }
            }
    
            textContent.style.fontSize = textSize + 'vh';
            okButton.style.fontSize = (textSize * 0.75) + 'vh'; 
            zoomButtons.forEach(button => button.style.fontSize = (textSize * 0.75) + 'vh');
        }
        function zoomContactText(action) {
            const contactContent = document.getElementById('contact-content');
            const okButton = document.querySelector('#contactBox .ok-button');
            const zoomButtons = document.querySelectorAll('#contactBox .zoom-button');
    
            if (action === '+') {
                contactTextSize += 0.2;
            } else if (action === '-') {
                contactTextSize -= 0.2;
                if (contactTextSize < 1) {
                    contactTextSize = 1;
                }
            }
    
            contactContent.style.fontSize = contactTextSize + 'vh';
            okButton.style.fontSize = (contactTextSize * 0.75) + 'vh';
            zoomButtons.forEach(button => button.style.fontSize = (contactTextSize * 0.75) + 'vh');
        }
        function zoomUpcomingText(action) {
            const upcomingContent = document.getElementById('upcoming-content');
            const okButton = document.querySelector('#upcomingBox .ok-button');
            const zoomButtons = document.querySelectorAll('#upcomingBox .zoom-button');
    
            if (action === '+') {
                upcomingTextSize += 0.2;
            } else if (action === '-') {
                upcomingTextSize -= 0.2;
                if (upcomingTextSize < 1) {
                    upcomingTextSize = 1;
                }
            }
    
            upcomingContent.style.fontSize = upcomingTextSize + 'vh';
            okButton.style.fontSize = (upcomingTextSize * 0.75) + 'vh';
            zoomButtons.forEach(button => button.style.fontSize = (upcomingTextSize * 0.75) + 'vh');
        }
        function zoomFAQText(action) {
            const faqContent = document.getElementById('faq-content');
            const okButton = document.querySelector('#faqBox .ok-button');
            const zoomButtons = document.querySelectorAll('#faqBox .zoom-button');
    
            if (action === '+') {
                faqTextSize += 0.2;
            } else if (action === '-') {
                faqTextSize -= 0.2;
                if (faqTextSize < 1) {
                    faqTextSize = 1;
                }
            }
    
            faqContent.style.fontSize = faqTextSize + 'vh';
            okButton.style.fontSize = (faqTextSize * 0.75) + 'vh';
            zoomButtons.forEach(button => button.style.fontSize = (faqTextSize * 0.75) + 'vh');
        }
        function zoomReferencesText(action) {
            const referencesContent = document.getElementById('references-content');
            const okButton = document.querySelector('#referencesBox .ok-button');
            const zoomButtons = document.querySelectorAll('#referencesBox .zoom-button');
    
            if (action === '+') {
                referencesTextSize += 0.2;
            } else if (action === '-') {
                referencesTextSize -= 0.2;
                if (referencesTextSize < 1) {
                    referencesTextSize = 1;
                }
            }
    
            referencesContent.style.fontSize = referencesTextSize + 'vh';
            okButton.style.fontSize = (referencesTextSize * 0.75) + 'vh';
            zoomButtons.forEach(button => button.style.fontSize = (referencesTextSize * 0.75) + 'vh');
        }
        function zoomFinalWordsText(action) {
            const finalWordsContent = document.getElementById('finalwords-content');
            const okButton = document.querySelector('#finalWordsBox .ok-button');
            const zoomButtons = document.querySelectorAll('#finalWordsBox .zoom-button');
    
            if (action === '+') {
                finalWordsTextSize += 0.2;
            } else if (action === '-') {
                finalWordsTextSize -= 0.2;
                if (finalWordsTextSize < 1) {
                    finalWordsTextSize = 1;
                }
            }
    
            finalWordsContent.style.fontSize = finalWordsTextSize + 'vh';
            okButton.style.fontSize = (finalWordsTextSize * 0.75) + 'vh';
            zoomButtons.forEach(button => button.style.fontSize = (finalWordsTextSize * 0.75) + 'vh');
        }
    </script>
</body>
</html>

I want the title and its frame to occupy the same fixed percentage of the screen width, regardless of the screen size. Give me the full html page code