ᴛᴡᴏ ɪɴ ᴏɴᴇ, ᴏʀ ᴏɴᴇ ɪɴ ᴛᴡᴏ.

<style>

    @import url('https://fonts.googleapis.com/css2?family=Economica&display=swap');

    @font-face {
        font-family: "barber";
        src: url('https://dl.dropboxusercontent.com/scl/fi/6x4jkvju9d8rmz6f3n4mo/BARBER.otf?rlkey=4hgp78bearrsgmzy8dl7jvj23&st=ev4o5s0l&dl=0');}


    ::-webkit-scrollbar {display: none;}

/* PAGE CENTERING */

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    cursor: url(https://i.imgur.com/WIeMSiR.png), auto; }

/* MAIN CONTAINER */

.wilder { position: fixed; bottom: 0px; right: 5px; }

.split-container {
    width: 500px;
    height: 400px;
    position: relative;
    overflow:;
    font-family: Georgia, serif; }

/* TEXT BOX */

.split-text {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    box-sizing: border-box; }

.split-text h2 {
    margin: 0 0 10px 0;
    font-family: barber;
    font-size: 28px;
    color: #999; }

.split-text p {
    font-family: economica;
    font-size: 14px;
    line-height: 1.6;
    max-width: 500px; }

.split-text b {
    font-family: economica;
    font-size: 14px;
    color: #999;
    filter:drop-shadow(0px 0px 1px #999); }

.split-text strong {
    font-family: economica;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    filter:drop-shadow(0px 0px 1px #777); }

.split-text u {
    font-family: economica;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    filter:drop-shadow(0px 0px 1px #555); }

.split-text a {
    font-family: economica;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #333;
    filter:drop-shadow(0px 0px 1px #333); }

.split-text a:hover {
    text-decoration: underline;
    color: #555;
    filter:drop-shadow(0px 0px 1px #555);
    transition: 0.5s; }

/* IMAGES */

.split-left,
.split-right{
    position:absolute;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: 0.7s ease; }

.split-left{
    left: 0;
    background-image: url(https://placehold.co/400x500.png); } /* LEFT */

.split-right {
    right: 0;
    background-image: url(https://placehold.co/400x500.png); } /* RIGHT */

/* HOVER ANIMATION */

.split-container:hover .split-left {
    transform: translateX(-75%); }

.split-container:hover .split-right {
    transform: translateX(75%); }

</style>

<div class="wilder">

    <a target="_blank" href="https://roleplay.chat/profile.php?user=WILDER" title="code by wilder.">
    <img src="https://i.imgur.com/FyeLjXd.png" width="50px;"></a>

</div>


<div class="split-container">

    <div class="split-text">
        <h2>header</h2>
        <p>

    single lines work best. <br>
    have fun, go crazy. <br><br>

    <b>bold</b> <strong>strong</strong> <u>underline</u> <a>link/hover</a>

        </p>
    </div>

    <div class="split-left"></div>
    <div class="split-right"></div>

</div>

<!----- 【 MUSIC PLAYER #02 by @glenthemes 】 ----->
<link href="//glen-players.gitlab.io/02/setup.css" rel="stylesheet">
<script src="//glen-players.gitlab.io/02/init.js"></script>

<div glenplayer02>

    <!--- player buttons --->
    <button play-button aria-label="Play"></button>
    <button pause-button aria-label="Pause"></button>

    <!--- song file URL --->
    <!--- PLEASE READ: linktr.ee/direct_file_links --->
    <audio src="MUSIC_LINK" volume="100%"></audio>

</div><!--don't delete this line-->

<style element="glenplayer02">
[glenplayer02]{
    /*--- options here ---*/
    --MusicPlayer-Position:"bottom left";
    --MusicPlayer-Corner-Offset:1rem;
    z-index:999; /* increase this number if you can't see or click your music player */

    --MusicPlayer-Buttons-Style:"fill";
    --MusicPlayer-Buttons-Size:1rem;
    --MusicPlayer-Buttons-Color:#999;
    --MusicPlayer-Buttons-Padding:6px;

    --MusicPlayer-Gap-1:10px;
    --MusicPlayer-Gap-2:10px;
}/* do not delete this bracket */
</style><!--don't delete this line-->
<!---- END MUSIC PLAYER ---->