Golden Savior

<style>


/*

❁ ≖≖✿❁  Hello!
     Thank you for using my code!
                                    ✿❁ ≖≖ ❁ *
Rules to Follow:

✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
✶ Do not redistribute this code, no matter how much you edited it!
✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!

If you like a custom code, check out my blog to see if commissions are open!

XOXO, Kawaii-Lau.

❁ ≖≖✿❁
        2020 © Coding by Kawaii-Lau
                                    ✿❁ ≖≖ ❁ * */



    /* ❁ ≖≖✿❁ SCROLLBAR CSS ✿❁ ≖≖ ❁ */

::-webkit-scrollbar {
        width:7px;
        height:6px;
        background:transparent;
        padding:10px;
}

::-webkit-scrollbar-thumb {
        width:4px;
        background:#DFDC91;
}


    /* ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ */


    /* ❁ ≖≖✿❁ GENERAL CSS CHANGE ✿❁ ≖≖ ❁ */

:root {
    --background:black;
    --boxes:linear-gradient(to bottom, #FCFCff, #e6dbc7);
    --main-font: 'Acme', sans-serif;
    --outer-font-color:white;
    --main-font-color:black;
    --border-1:#DEDA60;
    --border-2:#aa8d3f;
    --relation-color:#D7CC28;
}

        /* ❁ ≖≖✿❁ MAIN CODE CSS ✿❁ ≖≖ ❁ */

.background {
        background: var(--background) url(https://thumbs.gfycat.com/BriefIgnorantBlackbuck-size_restricted.gif) center;
        background-size:20% 20%;
        padding:80px 40px;
        width:1000px
}

.main-box-hide {
    overflow:hidden;
    border-radius:20px;
    width:920px;
    height:550px;
    margin-left:auto; margin-right:auto;
    border:2px outset var(--border-1);
}   /* Hides the main-box from overflowing */

.main-box {
        background:transparent;
        border-radius:20px;
        overflow:auto;
        color:var(--outer-font-color);
        height:550px;
}

        /* ❁ ≖≖✿❁ BOXES CSS ≖≖✿❁ ≖≖ ❁ */

.box-css {
        background:var(--boxes);
        color:var(--main-font-color);
        border-radius:20px;
        margin:5px;
        font-family:var(--main-font);
        overflow:hidden;

}

.box-padding {
        overflow:auto;
        padding:10px;
}

.box-header {
        font-family:'Abril Fatface';
        font-size:24px;
        text-align:center;
        letter-spacing:1px;
        text-shadow:0px 1px white;
        margin:0px;
}

/* ❁ ≖≖✿❁
        TITLE CSS
            "I can take you to Paradise" to Basic Info
                                            ≖≖✿❁ ≖≖ ❁ */

.title {
    width:180px;
    margin-top:100px;
    margin-right:20px; margin-left:20px;
    position:relative;
    z-index:5;

    color:rgba(255, 255, 255, 0.9)
}



    /*The individual words  */
    .names {
        text-align:right;
        font-family:'Abril Fatface';
        font-size:44px;
        font-style:italic;
        font-weight:900;
        letter-spacing:-1px
    }

    .names p {
        margin:-10px; transition:1s ease;
    }

    .names p:hover {
    letter-spacing:2px;
    cursor: default;
}

/* ❁ ≖≖✿❁
        BASIC INFORMATION CSS
                            ≖≖✿❁ ≖≖ ❁ */

.basic {
        width:220px;
        height:250px;
        margin-left:-20px;
}

    .basic table {
        color:var(--outer-font-color);
        border-spacing: 0px 5px;
    }

    .basic table td {
        padding:0px 5px;
        width:100px;

    }

    .basic table td:first-child {
        border-right:4px solid var(--border-1);
        text-align:right;
        font-size:18px;
        text-transform:uppercase;
        font-family:'Abril Fatface';
        padding-right:10px
    }

/* ❁ ≖≖✿❁
        MAIN HEADER PICTURE CSS
                            ≖≖✿❁ ≖≖ ❁ */

.profile-picture {
        width:300px;
        height:500px;
        padding:0px;
}

.pfp img {
        width:100%;
        height:400px
}

/* ❁ ≖≖✿❁
        QUOTES CSS
            "Do you believe in the afterworld?"
                                        ≖≖✿❁ ≖≖ ❁ */

.quote {
        margin-top:10px;

        color:#807D46 ;
        font-style:italic;
        text-align:center;
        font-family:'Niconne';
        font-size:36px;
        line-height:35px;
}

    .quote::before {content: ' ❝ '; margin-left:-10px}
    .quote::after {content: ' ❞ '; margin-left:}

/* ❁ ≖≖✿❁
            GENERAL INFORMATION
                CONTENT CSS
                                ≖≖✿❁ ≖≖ ❁ */

.info {
        width:240px;
        height:160px;
        padding:0px 10px;
        overflow:auto;
}

    .info table {
        color:var(--main-font-color);
        border-spacing: 0px 5px;
        width:100%;
        margin-left:auto; margin-right:auto;
    }

    .info table td {
        padding:0px 5px;
    }

    .info table td:first-child {
        border-right:4px double black;
        text-align:right;
        padding-right:10px
    }

/* ❁ ≖≖✿❁
            GENERAL SMALL PICTURES
                WITH BORDERS CSS
                                ≖≖✿❁ ≖≖ ❁ */

.single-pic {
            width:100px;
            height:100px;
            border-radius:20px;
            padding:5px;
            border:2px double var(--border-2);
            margin:10px 5px 0px 5px;
        }

        .single-pic img {
                width:100%;
                border-radius:20px;
        }

/* ❁ ≖≖✿❁
            APPEARANCE and RELATION
                    BOX CSS
                                ≖≖✿❁ ≖≖ ❁ */

.appearance {
        width:400px;
        height:160px
    }


.relation {
    margin:10px 0px
}

/* ❁ ≖≖✿❁
            PLAYLIST  BOX CSS
                                ≖≖✿❁ ≖≖ ❁ */


.song-cover {

        width:75px; height:75px;
        border-radius:20px;
        border:2px double var(--border-2);
        margin:10px 5px 5px 5px;
}

.song-cover img {
            width:100%;
            border-radius:20px;
        }
.song-title {
        margin:5px;
        width:150px;
}

.song-title p:first-child {
        margin:0px;
        font-family:'Abril Fatface';
        color:var(--relation-color);
        font-size:18px;
}


    /* ❁ ≖≖✿❁
            DIVIDER (CHECKERS) CSS
                                ≖≖✿❁ ≖≖ ❁ */

.divider {
        height:15px; width:97%;
        background: url(https://images1.pixlis.com/background-image-checkers-chequered-checkered-squares-seamless-tileable-half-spanish-white-luxor-gold-236f97.png) center;
        background-size:70%;
        margin:10px auto;
        border-radius:4px;
}

/* ❁ ≖≖✿❁
                    FLEXBOX AND CREDITS CSS
        (DO NOT REMOVE CREDITS EVER!)
                                ≖≖✿❁ ≖≖ ❁ */

.flexbox {display:flex} .row {flex-direction:row} .col {flex-direction:column}

.credits {
        margin-top:-12px;
        width:920px;
        margin-left:auto; margin-right:auto;
        font-family:var(--main-font);
        color:white;
        text-indent:60px;
}

.credits a {
        color:#E9A318;
        text-decoration:none;
        transition:1s ease;
}

.credits a:hover {
        letter-spacing:2px;
        color:#E9C318;
        text-shadow:0px 0px 5px #E9E67E;
}

</style>

<!-- CUSTOM FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Acme&family=Niconne&display=swap" rel="stylesheet">

<link href="https://codepen.io/Kawaii-Lau/pen/mdyoKdW.css" rel="stylesheet">


<body>

<div class="background">
    <div class="main-box-hide"><div class="main-box">
        <div class="flexbox row" id="fl1">
            <div class="flexbox col title">


<!-- ❁ ≖≖✿❁ ≖≖
        FIRST MIDDLE AND LAST NAMES
                                ≖≖✿❁ ≖≖ ❁ -->
                <div class="names">
                    <p>I can take</p>
                </div>

                <div class="names">
                    <p>you to</p>
                </div>

                <div class="names">
                    <p>Paradise...</p>
                </div>

<!-- ❁ ≖≖✿❁ ≖≖
        BASIC INFORMATION
    (Tip: copy paste everything from
                    <tr> .. </tr> to add tables)
                                        ≖≖✿❁ ≖≖ ❁ -->

                <div class="basic box-css" style="background:transparent; color:var(--outer-font-color)"><div class="box-padding" style="height:250px;">
                    <table>
                        <tr>
                            <td>Alias</td><td>Rika</td>
                        </tr>
                        <tr>
                            <td>Age</td><td> 23 </td>
                        </tr>
                        <tr>
                            <td>Birthdate</td><td> November 3rd</td>
                        </tr>
                        <tr>
                            <td>Birthplace</td><td>South Korea</td>
                        </tr>
                        <tr>
                            <td>Alligiance</td><td>The Mint Eye</td>
                        </tr>
                        <tr>
                            <td>Occupation</td><td> 'The Savior' </td>
                        </tr>
                    </table>
                </div></div>


            </div> <!-- Title div end -->

<!-- ❁ ≖≖✿❁ ≖≖
                    MAIN HEADER PICTURE
                (RECOMMENDED: 300 X 500PX )
                                        ≖≖✿❁ ≖≖ ❁ -->

            <div class="profile-picture box-css">
                <div class="pfp">
                    <img src="https://i.pinimg.com/564x/b5/7b/eb/b57bebd23c9491244406d74b0f44bea6.jpg"/>
                </div>

 <!-- ❁ ≖≖✿❁ ≖≖
                    QUOTES HERE
                (Adjust font-size IN CSS)
                                        ≖≖✿❁ ≖≖ ❁ -->

                <div class="quote box-padding">
                    Do you believe in<br> the afterworld?
                </div>

            </div>

        <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->
    <div class="trd-box flexbox col">

<!-- ❁ ≖≖✿❁ ≖≖
                APPEARANCE
                            ≖≖✿❁ ≖≖ ❁ -->
            <div class="appearance box-css">
                <div class="box-padding flexbox row">

                    <div class="info" style="text-align:justify">
                        <p class="box-header" >Appearance</p>
                    <table>
                        <tr>
                            <td>Height: 159cm</td><td>Weight: 46kg</td>
                        </tr>
                        <tr>
                            <td>Hair Color: Blonde</td><td>Eye Color: Light Green</td>
                        </tr>
                    </table>

              <p>Rika is a beautiful and slender fair-skinned young woman with long, wavy blonde hair that transitions to a lighter color with bangs swept to the left side, bright lime-green eyes and she is shown to be smiling most of the time.<br><br>

On normal occasions, she is seen wearing a brown knee-length dress with a large cream colored bow just below her collar bone on her left side. She has also been seen wearing a formal suit with her hair placed in a high ponytail when hosting the RFA parties.</p>
                    </div>

<!-- ❁ ≖≖✿❁ ≖≖
                SMALL PIC
                            ≖≖✿❁ ≖≖ ❁ -->
                    <div class="single-pic">
                        <img src="https://i.pinimg.com/564x/0a/cf/d4/0acfd4c65491a7d171a628b630d71ff4.jpg"/>
                    </div>
                </div>
            </div>

<!-- ❁ ≖≖✿❁ ≖≖
            PERSONALITY BOX
                            ≖≖✿❁ ≖≖ ❁ -->

            <div class="personality box-css">
                <div class="box-padding flexbox row">

<!-- ❁ ≖≖✿❁ ≖≖
                SMALL PIC
                            ≖≖✿❁ ≖≖ ❁ -->
                    <div class="single-pic">
                        <img src="https://i.pinimg.com/564x/fa/69/a0/fa69a0379b7ed8d39ab98f7e4c359780.jpg"/>
                    </div>
                    <div class="info" style="text-align:justify">
                    <p class="box-header">Personality</p>

                    <p>Rika is a kind, caring, bright, strong-willed and charismatic person on the outside that is described by the RFA members. She is said to care deeply for others and wanted to help them achieve happiness, which is the sole reason for her creating the RFA and she is also capable of inviting many people to her parties, mainly due to her great influence on others.</p>

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

<!-- ❁ ≖≖✿❁ ≖≖
                GALLERY
                            ≖≖✿❁ ≖≖ ❁ -->

            <div class="gallery" style="margin:10px">

            <p class="box-header">Gallery</p>
            <br>
                <div class="pictures">
                    <div class="flexbox row">

       <!-- 1st Gallery Row div -->

                        <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/e/e9/V_46.png" style="width:200px" alt="pic1-width-180px"/>   <!-- PIC 1-->
                    <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/5/53/V_14.png" style="width:200px" alt="pic2-width-180px"/>   <!-- PIC 2-->


                    </div>  <!-- 1st Gallery Row end div -->

                <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->
                    <div class="flexbox row">
                        <div class="flexbox col" style="width:180px">

     <!-- 2ND Gallery Row div -->
                        <img src="https://i.pinimg.com/564x/eb/f9/55/ebf955760a959bac04071bf396aec611.jpg" style="width:100%" alt="pic3-width-160px"/>      <!-- PIC 3 -->

                        <img src="https://i.pinimg.com/564x/41/4f/ec/414fecc4e3dbc3ce213c747f2ad3be19.jpg" style="width:180px" alt="pic4-width-160px"/>     <!-- PIC 4 -->

                        </div>

                    <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->
                        <div class="flexbox col" style="width:220px">
                        <img src="https://i.pinimg.com/564x/fb/fd/34/fbfd340bfb0d56ae287323d9adb1adcb.jpg" style="width:220px; height:347px" alt="pic5-width-220px"/>
                        <!-- PIC 5 -->
                        <img src="https://i.pinimg.com/564x/a0/68/5e/a0685ef560d54cab26954f29f324f009.jpg" style="width:220px" alt="pic6-width-220px"/>
                        <!-- PIC 6 -->
                        </div>

                    </div> <!-- 2nd Gallery Row end div -->

                <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->
                    <div class="flexbox row">
                        <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/a/a0/Event_8.png" style="width:200px" alt="pic6-width-180px"/>
                        <!-- PIC 7 -->

                    <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/a/a1/V_26.png" style="width:200px" alt="pic7-width-180px"/>           <!-- PIC 8 -->

                    </div>  <!-- 3rd Gallery Row end div -->


                </div></div> <!-- Gallery end div -->


        </div> <!-- 3rd Box End Div -->


        <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->

        </div> <!-- flexbox div end || Fl1 -->


    <!--    ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖         ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖ ON TO       ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖ THE NEXT    ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖ CONTENT ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁
            ❁ ≖≖✿❁ ≖≖             ≖≖✿❁ ≖≖ ❁

        -->

    <!-- START OF FL2 -->
        <div class="flexbox col" id="fl2" style="width:500px;height:1050px;margin-top:-1020px;margin-bottom:10px;">

            <div class="divider" style="overflow:hidden">
            <div style="background:rgba(255, 255, 255, 0.3);width:100%;height:100%;"></div></div>
            <!-- DIVIDER -->


<!-- ❁ ≖≖✿❁ ≖≖
                ABILITIES CONTENT
                                    ≖≖✿❁ ≖≖ ❁ -->
        <div class="abilities box-css">
                <div class="box-padding">
                    <p class="box-header">Abilities</p>

                    <div class="flexbox row">
                        <div class="info"  style="width:300px;height:200px;text-align:justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam in mattis massa. Nunc eget ornare orci. Nulla mattis purus a posuere sodales. Nullam sit amet leo felis. Duis sit amet consequat arcu, sed sollicitudin nunc. Phasellus id accumsan dui. Mauris tristique metus vitae urna malesuada pellentesque. Aliquam pretium nec dolor vel hendrerit.
                        </div>
                    <!-- Info End -->

                        <div class="info" style="width:250px;height:200px">

<!-- ❁ ≖≖✿❁ ≖≖
                ABILITIES TABLE CONTENT
                                    ≖≖✿❁ ≖≖ ❁ -->
                        <table style="color:var(--main-font-color);margin:10px auto;">
                            <tr>
                            <td>Manipulation</td><td>Persuasion</td>
                            </tr>
                            <tr>
                            <td>Brainwash Ability</td><td>Leadership</td>
                            </tr>
                            <tr>
                            <td>Betrayal</td><td>Illusion Manipulation</td>
                            </tr>
                        </table>
                        </div> <!-- Info End -->
                    </div>  <!-- Flexbox End -->
                </div>  <!-- Box Padding End -->
            </div>  <!-- Box CSS End -->

        <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->

            <div class="divider" style="overflow:hidden">
            <div style="background:rgba(255, 255, 255, 0.3);width:100%;height:100%;"></div></div>
            <!-- DIVIDER -->


<!-- ❁ ≖≖✿❁ ≖≖
            RELATIONS CONTENT
                            ≖≖✿❁ ≖≖ ❁ -->

            <div class="relationships box-css">
                <div class="box-padding" style="height:400px">

                <p class="box-header">Relations</p>

                <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->
                    <div class="relation flexbox row" >

                        <div class="info flexbox col" style="width:350px;">
            <!-- RELATION NAME  -->
                        <div class="box-header" style="text-align:right;margin-bottom:-10px">Fiance - <span style="color:var(--relation-color)">Kim Jihyun "V"</span></div>

            <!-- RELATION INFORMATION  -->
                        <p>V was Rika's fiance and they are seen to have loved each other very much. V proposed to her and the two became engaged. However, their relationship is highly dependent on one another to the point of it being unhealthy.</p>

<!-- ❁ ≖≖✿❁ ≖≖
            RELATIONS PICURES
                            ≖≖✿❁ ≖≖ ❁ -->
                            <div class="flexbox row" style="margin-left:auto; margin-right:auto">
                                <img src="https://i.pinimg.com/564x/88/fd/69/88fd69527e8d3151016e041ab9056be9.jpg" style="width:150px"/>
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/4/40/V_17.png" style="width:150px"/>
                                </div>

                        </div>

        <!-- RELATION PERSON PIC  -->
    <div class="single-pic relation-pic"><img src="https://i.imgur.com/7gSOS84.png"/></div>

                    </div><!-- END of 1st Relation -->

                <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->

                    <div class="relation flexbox row" >

        <!-- RELATION PIC  -->
    <div class="single-pic relation-pic"><img src="https://i.pinimg.com/564x/6b/cf/5b/6bcf5b02cbe603212621918feb9262a1.jpg"/></div>


                        <div class="info flexbox col" style="width:350px;">
                    <!-- RELATION NAME  -->
                            <div class="box-header" style="text-align:left;margin-bottom:-10px"><span style="color:var(--relation-color)">Kim Yoosung</span> - Cousin</div>

                    <!-- RELATION INFORMATION  -->
                        <p>Rika is Yoosung's cousin through adoption. While the two did not meet until later on, Yoosung feels that they became close. The two worked on community service together. After the death of her puppy, Sally, Yoosung vowed to become a veterinarian.</p>

<!-- ❁ ≖≖✿❁ ≖≖
                RELATIONS PICURES
                                ≖≖✿❁ ≖≖ ❁ -->
                            <div class="flexbox row" style="margin-left:auto; margin-right:auto">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/f/f9/Yoosung_37.png" style="width:150px"/>
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/5/5b/Yoosung_39.png" style="width:150px"/>
                            </div>



                    </div>
                </div> <!-- END of 2nd Relation -->

           <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->

                <div class="relation flexbox row" >

                        <div class="info flexbox col" style="width:350px;">
                    <!-- RELATION NAME  -->
                            <div class="box-header" style="text-align:right;margin-bottom:-10px"><span style="color:var(--relation-color)">Ryu Hyun "Zen"</span> - Friend</div>

                    <!-- RELATION INFORMATION  -->
                        <p>Rika is one of Zen's first fans who is also seen admiring his plays and acting. It is shown when she gave him red flowers as a congratulation when they first met. They even took a picture together and later on, Rika helped him with his career by supporting him and inviting him to RFA.</p>

<!-- ❁ ≖≖✿❁ ≖≖
                RELATIONS PICURES
                                ≖≖✿❁ ≖≖ ❁ -->
                            <div class="flexbox row" style="margin-left:auto; margin-right:auto">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/4/4a/Zen_7.png" style="width:150px"/>
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/2/26/Zen_31.jpg" style="width:150px"/>
                            </div>



                    </div>

                    <!-- RELATION PERSON PIC  -->
    <div class="single-pic relation-pic"><img src="https://i.pinimg.com/originals/f9/c8/0f/f9c80f2fd47a1ed80b9a7aa58d4fe910.png"/></div>

                </div> <!-- END of 3rd Relation -->


                <!-- ❁ ≖≖✿❁ ≖≖✿❁ ≖≖✿❁ ≖≖ ❁ -->


                </div>  <!-- Box Padding End -->
            </div>  <!-- RELATIONS Box CSS End -->

            <div class="divider" style="overflow:hidden">
            <div style="background:rgba(255, 255, 255, 0.3);width:100%;height:100%;"></div></div>
            <!-- DIVIDER -->



            <div class="oog box-css" style="height:220px">
                <div class="box-padding flexbox row">
                    <div class="oog-info flexbox col" style="width:200px">

<!-- ❁ ≖≖✿❁ ≖≖
            OOG INFORMATION CONTENT
                                ≖≖✿❁ ≖≖ ❁ -->

                        <div style="border-radius:100%; border:1px solid var(--border-1); width:110px;height:110px; margin-left:auto; margin-right:auto; padding:5px; overflow:hidden" >

             <!-- OOG PICTURE -->
                            <img src="https://pm1.narvii.com/6320/523634190a805d1ece8d90986b970764f02523ae_00.jpg" style="width:100%; border-radius:100%;" alt="oog-picture"/>
                        </div>

                        <div style="text-align:center; color:#A6A263; font-weight:bold; margin-top:4px; font-size:12px ">
                        <span style="font-size:18px; letter-spacing:2px">Mina</span>    <br>
                            GMT +9  <br>
                            Rika's Fundraising Association<br>
                        The Mint Eye
                        </div>

                    </div>  <!-- OOG INFO BOX END -->

<!-- ❁ ≖≖✿❁ ≖≖
            PLAYLIST CONTENT
                                ≖≖✿❁ ≖≖ ❁ -->

                    <div class="playlist flexbox col" style="width:280px;height:200px;overflow:auto">


                    <p class="box-header">Playlist</p>


                        <div class="song flexbox row">

                            <div class="song-cover">
                                <img src="https://ih1.redbubble.net/image.353937724.4740/ap,550x550,12x12,1,transparent,t.png"/>
                            </div>


                            <div class="song-title">
                                <p>Mint Eye</p>
                                ???
                            </div>

                        </div> <!-- END SONG -->

                        <div class="song flexbox row">

                            <div class="song-cover">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/d/d5/MM_OST.jpg"/>
                            </div>


                            <div class="song-title">
                                <p>Mysterious Clues</p>
                                Unknown
                            </div>

                        </div>  <!-- END SONG -->


                        <div class="song flexbox row">

                            <div class="song-cover">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/d/d5/MM_OST.jpg"/>
                            </div>


                            <div class="song-title">
                                <p>I Miss Happy Rika</p>
                                ...
                            </div>

                        </div>  <!-- END SONG -->

                        <div class="song flexbox row">

                            <div class="song-cover">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/d/d5/MM_OST.jpg"/>
                            </div>


                            <div class="song-title">
                                <p>Light and Daffodils</p>
                                <p style="font-family:Arial"> &hearts;</p>
                            </div>

                        </div>

                        <div class="song flexbox row">

                            <div class="song-cover">
                                <img src="https://vignette.wikia.nocookie.net/mystic-messenger/images/d/d5/MM_OST.jpg"/>
                            </div>


                            <div class="song-title">
                                <p>Like the Sun in the Sky</p>
                                <p style="font-family:Arial"> ^-^ </p>
                            </div>

                        </div>  <!-- END SONG -->

                    </div>  <!-- PLAYLIST BOX END -->



                </div>  <!-- Box Padding End -->
            </div>  <!-- OOG BOX END -->


            <div class="divider" style="overflow:hidden;width:880px;margin-left:15px;background-size:30%">
            <div style="background:rgba(255, 255, 255, 0.3);width:100%;height:100%;"></div></div>
            <!-- DIVIDER -->



        </div>  <!-- flexbox div end || Fl2 -->

    </div></div>    <!-- main-box div end -->

<!-- ❁ ≖≖✿❁ ≖≖
        CREDITS (DONT REMOVE PLEASE!)
                                ≖≖✿❁ ≖≖ ❁ -->

    <div class="credits">
        2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a>
    </div>

</div>  <!-- background end -->
</body>