Dismissable Pagedoll

<!-- Ideally, put this before all of your other code, or at least code that adds content to the page instead of just styling it. -->
<div id="pagedoll" class="carousel" data-ride="false" data-pause="true">
  <!-- Indicators -->
    <ul class="carousel-indicators">
        <li data-target="#pagedoll" data-slide-to="0" class="active"></li>
        <li data-target="#pagedoll" data-slide-to="1"></li>
    </ul>

    <!-- Wrapper for slides -->
        <!-- Change "left" to "right" to change what side the pagedoll is on! -->
    <div class="carousel-inner btn btn-outline-transparent p-0 hidden-md-down" style="max-width:15%; position:fixed; bottom:5px; left:5px; z-index:900;">
        <div class="carousel-item active">
            <!-- Pagedoll Source -->
            <img src="https://via.placeholder.com/200">
                <!-- Optional: Add style="pointer-events:none;" to the pagedoll image if it blocks links behind it. -->
        </div>

        <div class="carousel-item">
            <!-- Blank Image - DO NOT DELETE -->
                <!-- You CAN replace this image if you want a toggle or something instead, but this is why it can hide. -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69285236_y1EjlGNUDtSLcxE.png?1691713755" style="pointer-events:none;">
        </div>
    </div>

    <!-- Toggle Control -->
    <a class="btn btn-outline-secondary carousel-control-prev" style="position: absolute; top: -70px; left: 80px; max-height: 40px; max-width: 200px;"
            href="#pagedoll" data-slide="prev">
        <!-- Change text-danger into whatever bootstrap color you want, or apply a color argument in style. -->
        <span class="carousel-control-text text-danger" style="z-index:900; width:500px; font-style:italic;">Click to show/hide pagedoll</span>
    </a>
</div>