<!--HTML-->

<style>
    /* список */

    .html_tems_wrap {
        --bg: #f0f0f0;
        --shadow: -10px -10px 20px rgba(0, 0, 0, 0.04), 4px 4px 10px rgba(0, 0, 0, 0.1);
        --border: #ccc;
        --black: #222222;
        --white: #f1f1f1;
        --accent: #6e7668 --cubic: cubic-bezier(0.72, 0, 0, 1);
    }

    /* обертка тем */
    .html_tems_wrap {
        width: 100%;
        background: var(--bg);
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
        box-sizing: border-box;
        padding: 30px 25px;
        color: var(--black);
    }

    html {
        scroll-behavior: smooth;
    }

    .roles_wrap {
        display: flex;
        gap: 60px;
        justify-content: space-between;
        position: relative;
        height:250px;
        overflow: auto;
        overflow-x: hidden;
        align-items: flex-start;
    }

    .roles_nav {
        display: block;
        width: 150px;
        height: 100%;
        position: sticky;
        top: 25px
    }

    .roles_nav_list {
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
        width: 120px;
        margin-top: 0 !important;
        border-right: 3px solid var(--black);
        padding-right: 20px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .roles_nav_item a {
        font: 700 14px Inter;
        color: var(--white) !important;
        background: #a6b7b5;
        display: block;
        border-radius: 3px;
        padding: 6px 15px;
        transition: all .4s cubic-bezier(.64, .51, .55, 1) 0s !important;
        letter-spacing: .1em;
    }

    .roles_nav_item a.active,
    .roles_nav_item a:hover {
        background: #6e7668;
        padding-left: 30px
    }

    .roles_boxes {
        flex: 1;
    }

    .role_cont+.role_cont {
        padding-top: 15px;
        margin-top: 10px;
    }

    .role_section_wrap+.role_section_wrap {
        margin-top: 15px
    }

    .r_headline {
        font: 400 20px Tinos
    }

    .r_author {
        font: 400 10px Inter;
        text-transform: uppercase;
        margin-top: 10px;
        opacity: .6;
        letter-spacing: .1em
    }

    .charcter_list {
        list-style: none !important;
        padding: 10px 0px 15px 0px !important;
        margin: 0 0 0 40px !important;
        font: 500 16px/200% Inter;
        border-bottom: 1px solid #a6b7b5
    }

    .charcter_list li {
        transition: all .7s cubic-bezier(.64, .51, .55, 1) 0s;
    }

    .charcter_list a {
        transition: all .4s cubic-bezier(.64, .51, .55, 1) 0s !important;
        color: var(--accent) !important;
    }

    .charcter_list a:hover {
        padding-left: 20px;
        color: var(--black)
    }

    .charcter_list:hover li {
        opacity: .6
    }

    .charcter_list li:hover {
        opacity: 1
    }
</style>


<div class="html_tems_wrap">
    <div class="roles_wrap">
        <nav class="roles_nav">
            <ul class="roles_nav_list">
                <li class="roles_nav_item"><a href="#ABCD">ABCD</a></li>
                <li class="roles_nav_item"><a href="#EFGH">EFGH</a></li>
                <li class="roles_nav_item"><a href="#IJKL">IJKL</a></li>
                <li class="roles_nav_item"><a href="#MNOP">MNOP</a></li>
                <li class="roles_nav_item"><a href="#QRSTD">QRSTD</a></li>
                <li class="roles_nav_item"><a href="#UVWX">UVWX</a></li>
                <li class="roles_nav_item"><a href="#YZ123">YZ123</a></li>
            </ul>
        </nav>

        <div class="roles_boxes">
            <div class="role_cont" id="ABCD">

                <div class="role_section_wrap">
                    <div class="r_headline">A SONG OF ICE AND FIRE</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=182">daena targaryen</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=109">cannibal</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=174">lyanna mormont</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=110">moondancer</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=181">ramsay bolton</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=18">rhaegal</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=108">sunfyre</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=59">vhagar</a></li>
                    </ul>
                </div>


                <div class="role_section_wrap">
                    <div class="r_headline">BUBBLE COMICS</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=75">oleg volkov</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=186">sergey razumovsky</a></li>
                    </ul>
                </div>

                <div class="role_section_wrap">
                    <div class="r_headline">DRAGON AGE</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=71">inquisitor</a></li>
                    </ul>
                </div>
            </div>


            <div class="role_cont" id="EFGH">

                <div class="role_section_wrap">
                    <div class="r_headline">GREEK MYTHOLOGY</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=185">artemis</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=177">nyx</a></li>
                    </ul>
                </div>

                <div class="role_section_wrap">
                    <div class="r_headline">HOWL'S MOVING CASTLE</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=123">howl</a></li>
                    </ul>
                </div>
            </div>

            <div class="role_cont" id="IJKL">


                <div class="role_section_wrap">
                    <div class="r_headline">J.K. ROWLING'S WIZARDING WORLD</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=183">cedrella weasley</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=132">ginny weasley</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=131">gregory goyle</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=184">janelle de trefle-picques</a></li>
                    </ul>
                </div>

                <div class="role_section_wrap">
                    <div class="r_headline">LOST SOULS</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=103">zillaha</a></li>
                    </ul>
                </div>

            </div>

            <div class="role_cont" id="MNOP">

                <div class="role_section_wrap">
                    <div class="r_headline">FANDOM NAME</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me">name surname</a></li>
                    </ul>
                </div>

            </div>

            <div class="role_cont" id="QRSTD">

                <div class="role_section_wrap">
                    <div class="r_headline">SLAVIC FOLKLORE</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=180">kikimora</a></li>
                    </ul>
                </div>


                <div class="role_section_wrap">
                    <div class="r_headline">TAROT CARDS</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=173">the tower</a></li>
                    </ul>
                </div>

                <div class="role_section_wrap">
                    <div class="r_headline">THE GRISHAVERSE</div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=190">zoya nazyalensky</a></li> 
                    </ul>
                </div>

            </div>

            <div class="role_cont" id="UVWX">


                <div class="role_section_wrap">
                    <div class="r_headline">WINX CLUB </div>
                    <ul class="charcter_list">
                        <li><a href="https://berloga.rolfor.me/profile.php?id=78">stormy</a></li>
                        <li><a href="https://berloga.rolfor.me/profile.php?id=66">valtor</a></li>
                    </ul>
                </div>

            </div>

            <div class="role_cont" id="YZ123">

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

            </div>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

        </div>
    </div>
</div>
<script>
    $('.roles_nav_list li>a').on('click', function() {
        $('.roles_nav_list li>a').removeClass('active');
        $(this).addClass('active');
    });
</script>