ETH [yuchino]

<div class="fixed-bottom p-2" style="absolute;top:0px;bottom:0px;left:0px;">
    <div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("https://i.pinimg.com/564x/67/14/b8/6714b8144a279cb8beb3685cea79f69c.jpg") repeat center; width: 100%; z-index: -1;'>
        <div class="card-transparent" style="height:820px;overflow-y:auto;overflow-x:hidden;scrollbar-width: none;"><br><br><br>
            <div class="container" style="max-width:900px;">
            </div>
<img src="https://i.imgur.com/jyMfW1d.png"
style="max-height: 300px; position: fixed; right: 10px; bottom: 10px; z-index: 100;"
title="Hello There!"
class="tooltipster hidden-sm-down">
            <div class="container-fluid" style="padding: 0; margin: 0;">
                <div class="row" style="margin: 0; height: 100vh;">

                    <!-- Left Sidebar -->
                    <div class="col-lg-3 col-12 p-0 d-flex" style="height: 100%; position: sticky; top: 0;">
                        <div class="card border-0 d-flex flex-fill" style="border-radius: 1rem; background-image: url('https://i.imgur.com/GXklL8e.png'); background-position: center; background-size: cover;">
                            <!-- Filler card -->
                            <div class="card d-flex flex-fill border-0" style="background: transparent;"></div>

                            <!-- Music player -->
                            <div class="card border-0 bg-faded p-2 tooltipster" style="border-radius: 0 1rem 0 0; height: 50px; width: 50px; position: relative;" title="Oak & Ash & Thorn - The Longest Johns">
                                <p class="m-auto" style="position: relative; z-index: 1;">
                                    <iframe class="w-100" frameborder="0" style="height: 1rem; width: 1rem; position: absolute; opacity: 0.002" src="https://www.youtube.com/embed/vBETMTwpud0?si=z8xMothbG_CDwGZl"></iframe>
                                    <i class="fas fa-music fa-fw" style="font-size: 1rem;"></i>
                                </p>
                            </div>
                        </div>

                        <!-- Veil Overlay -->
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;">
                            <img src="https://i.imgur.com/flMKH9a.png" style="width: 100%; height: auto; opacity: 0.5; position: absolute; top: -20px; left: -20px; transform: translate(-10%, -10%);">
                        </div>

                        <!-- Static Clouds on Left Sidebar -->
                        <i class="fa-solid fa-cloud" style="position: absolute; top: 20%; left: 10%; font-size: 5rem; color: white; z-index: 3;"></i>
                        <i class="fa-solid fa-cloud" style="position: absolute; top: 30%; left: 40%; font-size: 2rem; color: white; z-index: 3;"></i>
                    </div>

                    <!-- Transparent Image Positioned Above Main Content -->
                    <div style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/73035670_8H32jN5f6o6cZ4f.png" style="width: 300px; height: auto;">
                    </div>

                    <!-- Main Content Area -->
                    <div class="col-lg-6 col-12 p-0 d-flex" style="height: 100%;">
                        <div style="margin: auto; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); flex: 1; display: flex; flex-direction: column; max-height: 90vh; position: relative;">

                            <!-- Top Image with Overlay -->
                            <div style="position: relative; height: 160px; background-image: url('https://i.pinimg.com/564x/ac/83/f9/ac83f9fdc42822335e5772d47e61f297.jpg'); background-size: cover; background-position: center; text-align: center; height: 500px">
                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(221,134,255,0.5);"></div>
                            </div>

                            <!-- Scrollable Content Area -->
                            <div style="flex: 1; overflow-y: auto; padding: 20px;">

                                <!-- Quote Section -->
                                <div style="background-color: white; color: black; padding: 1px 15px; text-align: center; font-style: italic;">
                                    <p>...</p>
                                    "Always dreaming, never still....."
                                </div>

                                <!-- Character Info Box -->
                                <div style="display: flex; padding: 20px; background-color: black; color: white; border-radius: 5px; margin-bottom: 10px; align-items: center;">
                                    <!-- Top Vertical Image -->
                                    <div style="flex: 0 0 50%; width: 150px; height: auto; margin-right: 20px;">
                                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/52583158_zfVgUaEu2nmqQHV.png" alt="Vertical Image" style="width: 100%; height: auto; object-fit: cover; border-radius: 5px;">
                                    </div>
                                    <!-- Details Box -->
                                    <div style="flex: 1;">
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Name:</strong> Noontide, the dreamer
                                        </div>
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Pronouns:</strong> he/they
                                        </div>
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Age:</strong> X☾
                                        </div>
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Content:</strong> [Content]
                                        </div>
                                        <!-- Additional Details -->
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Rank:</strong> [Rank]
                                        </div>
                                        <div style="margin-bottom: 10px;">
                                            <strong>✧ Class:</strong> [Class]
                                        </div>
                                         <div style="margin-bottom: 10px;">
                                            <strong>✧ "TITLE"</strong>
                                        </div>
                                        <div style="margin-bottom: 10px;">
                                            blurb here. This is where a short flavor text blurb can go! this part will only extend as far as the box is, so please dont make this too lengthy, you can add way more sections below this as you desire :)
                                        </div>
                                    </div>

                                </div>

                                <!-- Description Box -->
                                <div style="background-color: #f0f0f0; color: black; padding: 15px; border-radius: 5px; max-height: 100px; overflow-y: auto;">
                                    <strong>✧ About</strong>
                                    <p>Text! This is where the character description goes. If the description is long enough, it will now scroll vertically instead of overflowing horizontally. You can add more text here to test scrolling behavior.</p>
                                </div>

                                <!-- Additional Content -->
                                <div style="padding: 20px; background-color: #4c2265;">
                                    <h5>"Title Here"</h5>
                                    <p><italic>short quote or snippet here</italic></p>
                                </div>
<div class="container" style="max-width: 88%; height: 300px; overflow: hidden;">
    <div id="carousel2" class="carousel slide mx-auto p-1" data-ride="carousel">
        <div class="carousel-inner">
            <!-- Character 1 -->
            <div class="carousel-item active">
                <div class="bg-dark text-white p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col-md-6">
                            <div class="rounded d-block mx-auto" style="height: 250px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/24844009?1704963892) center; background-size: cover;"></div>
                        </div>
                        <div class="col-md-6 text-center">
                            <div style="color: #fff; font-weight: bold; font-size: 24px;">WAKING</div>
                            <div style="color: #ccc; height: 200px; overflow: auto; font-size: 18px;">
                                <i>"my mentor... hm"</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Character 1 -->

            <!-- Character 2 -->
            <div class="carousel-item">
                <div class="bg-dark text-white p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col-md-6">
                            <div class="rounded d-block mx-auto" style="height: 250px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/20646660?1688376127) center; background-size: cover;"></div>
                        </div>
                        <div class="col-md-6 text-center">
                            <div style="color: #fff; font-weight: bold; font-size: 24px;">02 — RUST</div>
                            <div style="color: #ccc; height: 200px; overflow: auto; font-size: 18px;">
                                <i>"text"</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Character 2 -->

            <!-- Character 3 -->
            <div class="carousel-item">
                <div class="bg-dark text-white p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col-md-6">
                            <div class="rounded d-block mx-auto" style="height: 250px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/19707475?1700217710) center; background-size: cover;"></div>
                        </div>
                        <div class="col-md-6 text-center">
                            <div style="color: #fff; font-weight: bold; font-size: 24px;">CHERUB</div>
                            <div style="color: #ccc; height: 200px; overflow: auto; font-size: 18px;">
                                <i>"text"</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Character 3 -->

            <!-- Character 4 -->
            <div class="carousel-item">
                <div class="bg-dark text-white p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col-md-6">
                            <div class="rounded d-block mx-auto" style="height: 250px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/9830065?1688375906) center; background-size: cover;"></div>
                        </div>
                        <div class="col-md-6 text-center">
                            <div style="color: #fff; font-weight: bold; font-size: 24px;">NOCEUR</div>
                            <div style="color: #ccc; height: 200px; overflow: auto; font-size: 18px;">
                                <i>"text"</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Character 4 -->

            <!-- Add more entries here as needed -->
        </div>
        <a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev" style="color: #9b40e3;">
            <span class="fas fa-arrow-alt-circle-left fa-lg" style="font-size: 30px;" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel2" role="button" data-slide="next" style="color: #9b40e3;">
            <span class="fas fa-arrow-alt-circle-right fa-lg" style="font-size: 30px;" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

                            </div>

                            <!-- Footer with 3 Images -->
<div style="display: flex; padding: 0; background-color: #f0f0f0; height: 100px;">
    <div style="flex: 1; overflow: hidden;">
        <img src="https://i.pinimg.com/564x/8b/49/03/8b49039c1cf8f27ed697c327ec7cc131.jpg" alt="Image 1" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="flex: 1; overflow: hidden;">
        <img src="https://i.pinimg.com/564x/f3/71/8f/f3718f877baea56ed4fb842d55561370.jpg" alt="Image 2" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="flex: 1; overflow: hidden;">
        <img src="https://i.pinimg.com/564x/65/ab/39/65ab39c8060ab5089781f6bc2c4fdae0.jpg" alt="Image 3" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
</div>


                            <!-- Backstory Section -->
                            <div style="background-color: #592c97; padding: 15px; border-radius: 5px; margin-top: 10px; flex-shrink: 0;">
                                <div style="max-height: 100px; overflow-y: auto;">
                                    <strong>✧ Arc 1</strong>
                                    <p>This is where the character's backstory goes. It can be long and detailed, and will scroll if it exceeds the maximum height of this box.</p>
                                    <p>More text to ensure the scrolling works properly. You can add more details about the character here.LALALALALLA</p>
                                <strong>✧Arc 2</strong>
                                <p>This is where the character's backstory goes. It can be long and detailed, and will scroll if it exceeds the maximum height of this box.</p>
                                    <p>More text to ensure the scrolling works properly. You can add more details about the character here.LALALALALLA</p>

                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Sidebar -->
                    <div class="col-lg-3 col-12 p-0 d-flex" style="height: 100%; position: sticky; top: 0;">
                        <div class="card border-0 d-flex flex-fill" style="border-radius: 1rem; background-image: url('https://i.imgur.com/97vevjz.png'); background-position: center; background-size: cover;">
                            <div class="card border-0 bg-faded" style="border-radius: 0 0 0 1rem; padding: 15px; text-align: center;">

                                <p style="color: white; margin-top: 10px;">"How can I help you?"</p>
                            </div>
                        </div>

                        <!-- Flip Veil Overlay -->
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;">
                            <img src="https://i.imgur.com/7zaptUe.png" style="width: 100%; height: auto; opacity: 0.5; position: absolute; top: -20px; left: 100px; transform: translate(-10%, -10%);">
                        </div>

                       <!-- Static Clouds on Right Sidebar -->
<i class="fa-solid fa-cloud" style="position: absolute; top: 20%; right: 10%; font-size: 5rem; color: white; z-index: 3;"></i>
<i class="fa-solid fa-cloud" style="position: absolute; top: 30%; right: 40%; font-size: 2rem; color: white; z-index: 3;"></i>

<!-- Mirrored Clouds on Left Sidebar -->
<i class="fa-solid fa-cloud" style="position: absolute; top: 20%; left: 10%; font-size: 5rem; color: white; z-index: 3;"></i>
<i class="fa-solid fa-cloud" style="position: absolute; top: 30%; left: 40%; font-size: 2rem; color: white; z-index: 3;"></i>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>