Edit in JSFiddle

(function () {
    'use strict';
    var breakpoint = 767.98; // md bs4 breakpoint size
    function sidebarRelativePosition() {
        // Change relative positioning of the sidebar nav based on the window width
        if ($(window).width() <= breakpoint) { // collapsable
            $('#sideNav').addClass('position-absolute').removeClass('show');
        } else { // static
            $('#sideNav').removeClass('position-absolute').addClass('show');
        }
    }
    var scrollSpyOpts = {
        target: '#sideNav',
        offset: 50
    };
    
    $(window).on('resize', sidebarRelativePosition);
    $('a.nav-link').click(function () {
        if ($(window).width() <= breakpoint) {
            // programmacially close the sidebar when small screen
            $('#sideNav').collapse('hide');
        }
    });

    $('#view').scrollspy(scrollSpyOpts);
    $(document).ready(function () {
        setTimeout(function(){
            $('#view').scrollspy(scrollSpyOpts);
        }, 1000);
        sidebarRelativePosition();

        var videos = document.querySelectorAll('video');
        function pauseAll(elem) {
            for (var i = videos.length - 1; i >= 0; i--) {
                if (videos[i] === elem) {
                    continue;
                }
                if (!videos[i].paused && videos[i].played.length > 0) {
                    videos[i].pause();
                }
            }
        }
        for (var i = videos.length - 1; i >= 0; i--) {
            videos[i].addEventListener('play', pauseAll(this), true);
        }
    });
})();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Players Handbook</title>
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

</head>
<body id="index" class="d-flex vh-100 vw-100 bg-light" style="padding-top: 56px">
    <nav class="navbar fixed-top navbar-dark bg-dark">
        <a class="navbar-brand" href="">
            <span>Placeholder</span>
        </a>
        <a class="d-md-none d-inline-block" data-toggle="collapse" data-target="#sideNav" aria-hidden="true"
            aria-expanded="false" aria-controls="sideNav" href="#">
            <i class="fas fa-bars">
            </i>
        </a>
    </nav>
    <nav id="sideNav"
        class="collapse width show overflow-auto h-100 nav navbar-nav navbar-dark bg-dark col-sm-8 col-md-3 flex-column p-0"
        role="navigation">
        <a class="navbar-brand d-md-none pt-3 pb-2 d-inline-block">
            <span>&nbsp;</span>
        </a>
        <a href="#id8de1faf6-5265-4d48-8ee6-4a2203403e39" class="px-3 py-3 nav-link btn-dark"
            data-target="#id8de1faf6-5265-4d48-8ee6-4a2203403e39">
            <span>Races</span>
        </a>
        <a href="#id97e03a60-77d2-4333-947c-a871b601a96c" class="px-3 py-3 nav-link btn-dark"
            data-target="#id97e03a60-77d2-4333-947c-a871b601a96c">
            <span>Classes</span>
        </a>
        <a href="#idcebbe189-320a-4de2-b8c4-6c6f9693183e" class="px-3 py-3 nav-link btn-dark"
            data-target="#idcebbe189-320a-4de2-b8c4-6c6f9693183e">
            <span>Spells</span>
        </a>
        <a href="#idbacaf316-9319-462a-9e0d-a1abecfdb738" class="px-3 py-3 nav-link btn-dark active"
            data-target="#idbacaf316-9319-462a-9e0d-a1abecfdb738">
            <span>Appendix</span>
        </a>
    </nav>
    <div id="view" class="flex-grow-1 d-flex overflow-auto h-100 justify-content-center">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-lg-8 col-md-12 p-0 h-100 bg-white">
                    <div>
                        <div id="id8de1faf6-5265-4d48-8ee6-4a2203403e39"> </div>
                        <div class="card rounded-0 border-0">
                            <div class="card-body pb-0">
                                <h1 class="card-title border-dark border-bottom">
                                    <span class="">Races</span>
                                </h1>
                            </div>
                            <div>

                            </div>
                            <div>
                                <div class="card-body">

                                    <div class="element-image">
                                        <img class="img-fluid mx-auto d-block"
                                            src="https://placekitten.com/1200/800">
                                        <div class="text-muted font-italic text-center bg-light border">
                                            <small>The standard high fantasy races</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Human</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Elf</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Dwarf</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="id97e03a60-77d2-4333-947c-a871b601a96c"> </div>
                        <div class="card rounded-0 border-0">
                            <div class="card-body pb-0">
                                <h1 class="card-title border-dark border-bottom">
                                    <span class="">Classes</span>
                                </h1>
                            </div>
                            <div>

                            </div>
                            <div>
                                <div class="card-body">

                                    <div class="element-image">
                                        <img class="img-fluid mx-auto d-block"
                                            src="https://placekitten.com/1200/800">
                                        <div class="text-muted font-italic text-center bg-light border">
                                            <small>Some classes</small>
                                        </div>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Fighter</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-group">
                                        <div class="ml-n4 rounded-0 card card-header">
                                            <h4 class="m-0">
                                                <button
                                                    class="btn btn-link p-0 btn-block text-left element-group-toggle"
                                                    type="button" data-toggle="collapse" aria-expanded="true"
                                                    data-target="#element310d0055-6330-4137-82fe-7d6f60b863fa"
                                                    aria-controls="element310d0055-6330-4137-82fe-7d6f60b863fa">COLLAPSEABLE Fighter Archetypes</button>
                                            </h4>
                                        </div>
                                        <div class="collapse show" id="element310d0055-6330-4137-82fe-7d6f60b863fa"
                                            aria-labelledby="#element310d0055-6330-4137-82fe-7d6f60b863fa" style="">
                                            <div>
                                                <div class="card-body">
                                                    <div class="element-html">
                                                        <div>
                                                            <h3>Eldritch Knight</h3>
                                                            <p>Donec quis rhoncus libero, quis mattis urna. Curabitur
                                                                efficitur diam eu odio auctor, sed sodales risus
                                                                ullamcorper. Donec condimentum mattis elit. Donec non
                                                                lacus felis. Orci varius natoque penatibus et magnis dis
                                                                parturient montes, nascetur ridiculus mus. Quisque et
                                                                ullamcorper nibh. Sed ac urna velit. Ut erat magna,
                                                                sodales et ante non, sollicitudin porta erat. Curabitur
                                                                quis pretium urna. Maecenas bibendum suscipit nisl nec
                                                                hendrerit. Nullam ornare est eu nisl imperdiet
                                                                dignissim. Etiam vel malesuada erat. Nulla facilisi.
                                                                Praesent eu ante sagittis, dapibus purus quis, mollis
                                                                felis. Mauris lobortis diam nunc, in aliquet felis
                                                                suscipit a.</p>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Cleric</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-group">
                                        <div class="ml-n4 rounded-0 card card-header">
                                            <h4 class="m-0">
                                                <button
                                                    class="btn btn-link p-0 collapsed btn-block text-left element-group-toggle"
                                                    type="button" data-toggle="collapse" aria-expanded="false"
                                                    data-target="#element933b587d-d49a-4cd9-adcc-499fe6bb959f"
                                                    aria-controls="element933b587d-d49a-4cd9-adcc-499fe6bb959f">COLLAPSEABLE Cleric Archetypes</button>
                                            </h4>
                                        </div>
                                        <div class="collapse" id="element933b587d-d49a-4cd9-adcc-499fe6bb959f"
                                            aria-labelledby="#element933b587d-d49a-4cd9-adcc-499fe6bb959f">
                                            <div>
                                                <div class="card-body">
                                                    <div class="element-html">
                                                        <div>
                                                            <h3>Sun Domain</h3>
                                                            <p>Donec quis rhoncus libero, quis mattis urna. Curabitur
                                                                efficitur diam eu odio auctor, sed sodales risus
                                                                ullamcorper. Donec condimentum mattis elit. Donec non
                                                                lacus felis. Orci varius natoque penatibus et magnis dis
                                                                parturient montes, nascetur ridiculus mus. Quisque et
                                                                ullamcorper nibh. Sed ac urna velit. Ut erat magna,
                                                                sodales et ante non, sollicitudin porta erat. Curabitur
                                                                quis pretium urna. Maecenas bibendum suscipit nisl nec
                                                                hendrerit. Nullam ornare est eu nisl imperdiet
                                                                dignissim. Etiam vel malesuada erat. Nulla facilisi.
                                                                Praesent eu ante sagittis, dapibus purus quis, mollis
                                                                felis. Mauris lobortis diam nunc, in aliquet felis
                                                                suscipit a.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="element-html">
                                                        <div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Rouge</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-group">
                                        <div class="ml-n4 rounded-0 card card-header">
                                            <h4 class="m-0">
                                                <button
                                                    class="btn btn-link p-0 collapsed btn-block text-left element-group-toggle"
                                                    type="button" data-toggle="collapse" aria-expanded="false"
                                                    data-target="#element1ecc7962-00e8-4f56-aa11-ccdf6693e0eb"
                                                    aria-controls="element1ecc7962-00e8-4f56-aa11-ccdf6693e0eb">COLLAPSEABLE Rogue Archetypes</button>
                                            </h4>
                                        </div>
                                        <div class="collapse" id="element1ecc7962-00e8-4f56-aa11-ccdf6693e0eb"
                                            aria-labelledby="#element1ecc7962-00e8-4f56-aa11-ccdf6693e0eb">
                                            <div>
                                                <div class="card-body">
                                                    <div class="element-html">
                                                        <div>
                                                            <h3>Scout</h3>
                                                            <p>Donec quis rhoncus libero, quis mattis urna. Curabitur
                                                                efficitur diam eu odio auctor, sed sodales risus
                                                                ullamcorper. Donec condimentum mattis elit. Donec non
                                                                lacus felis. Orci varius natoque penatibus et magnis dis
                                                                parturient montes, nascetur ridiculus mus. Quisque et
                                                                ullamcorper nibh. Sed ac urna velit. Ut erat magna,
                                                                sodales et ante non, sollicitudin porta erat. Curabitur
                                                                quis pretium urna. Maecenas bibendum suscipit nisl nec
                                                                hendrerit. Nullam ornare est eu nisl imperdiet
                                                                dignissim. Etiam vel malesuada erat. Nulla facilisi.
                                                                Praesent eu ante sagittis, dapibus purus quis, mollis
                                                                felis. Mauris lobortis diam nunc, in aliquet felis
                                                                suscipit a.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-html">
                                        <div>
                                            <h1>Wizard</h1>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                interrete. Qui enim existimabit posse se miserum esse beatus non erit.
                                                Qui est in parvis malis. Negabat igitur ullam esse artem, quae ipsa a se
                                                proficisceretur; Hoc positum in Phaedro a Platone probavit Epicurus
                                                sensitque in omni disputatione id fieri oportere. Utrum igitur tibi
                                                litteram videor an totas paginas commovere? At iam decimum annum in
                                                spelunca iacet. Is ita vivebat, ut nulla tam exquisita posset inveniri
                                                voluptas, qua non abundaret.</p>
                                            <ul>
                                                <li>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.</li>
                                                <li>Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non
                                                    deserat.</li>
                                                <li>De maximma autem re eodem modo, divina mente atque natura mundum
                                                    universum et eius maxima partis administrari.</li>
                                                <li>In eo autem voluptas omnium Latine loquentium more ponitur, cum
                                                    percipitur ea, quae sensum aliquem moveat, iucunditas.</li>
                                            </ul>
                                            <ol>
                                                <li>Tu enim ista lenius, hic Stoicorum more nos vexat.</li>
                                                <li>Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.</li>
                                                <li>Nihilne te delectat umquam -video, quicum loquar-, te igitur,
                                                    Torquate, ipsum per se nihil delectat?</li>
                                                <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum
                                                    esse omnibus suis partibus;</li>
                                            </ol>
                                            <p>Ergo id est convenienter naturae vivere, a natura discedere. Quo studio
                                                Aristophanem putamus aetatem in litteris duxisse? Inde igitur, inquit,
                                                ordiendum est. Sed ad haec, nisi molestum est, habeo quae velim. Haec et
                                                tu ita posuisti, et verba vestra sunt. Consequentia exquirere, quoad sit
                                                id, quod volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse
                                                perversius. Iis igitur est difficilius satis facere, qui se Latina
                                                scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                            <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Cupit
                                                enim dícere nihil posse ad beatam vitam deesse sapienti. Aliter enim
                                                explicari, quod quaeritur, non potest. Deinde disputat, quod cuiusque
                                                generis animantium statui deceat extremum. Haec bene dicuntur, nec ego
                                                repugno, sed inter sese ipsa pugnant. Hoc est non dividere, sed
                                                frangere.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-group">
                                        <div class="ml-n4 rounded-0 card card-header">
                                            <h4 class="m-0">
                                                <button
                                                    class="btn btn-link p-0 collapsed btn-block text-left element-group-toggle"
                                                    type="button" data-toggle="collapse" aria-expanded="false"
                                                    data-target="#element95d7a7a9-7c33-4b82-b983-c703edb2fd74"
                                                    aria-controls="element95d7a7a9-7c33-4b82-b983-c703edb2fd74">COLLAPSEABLE Wizard Archetypes</button>
                                            </h4>
                                        </div>
                                        <div class="collapse" id="element95d7a7a9-7c33-4b82-b983-c703edb2fd74"
                                            aria-labelledby="#element95d7a7a9-7c33-4b82-b983-c703edb2fd74">
                                            <div>
                                                <div class="card-body">
                                                    <div class="element-html">
                                                        <div>
                                                            <h3>School of Evocation</h3>
                                                            <p>Donec quis rhoncus libero, quis mattis urna. Curabitur
                                                                efficitur diam eu odio auctor, sed sodales risus
                                                                ullamcorper. Donec condimentum mattis elit. Donec non
                                                                lacus felis. Orci varius natoque penatibus et magnis dis
                                                                parturient montes, nascetur ridiculus mus. Quisque et
                                                                ullamcorper nibh. Sed ac urna velit. Ut erat magna,
                                                                sodales et ante non, sollicitudin porta erat. Curabitur
                                                                quis pretium urna. Maecenas bibendum suscipit nisl nec
                                                                hendrerit. Nullam ornare est eu nisl imperdiet
                                                                dignissim. Etiam vel malesuada erat. Nulla facilisi.
                                                                Praesent eu ante sagittis, dapibus purus quis, mollis
                                                                felis. Mauris lobortis diam nunc, in aliquet felis
                                                                suscipit a.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="idcebbe189-320a-4de2-b8c4-6c6f9693183e"> </div>
                        <div class="card rounded-0 border-0">
                            <div class="card-body pb-0">
                                <h1 class="card-title border-dark border-bottom">
                                    <span class="">Spells</span>
                                </h1>
                            </div>
                            <div>
                            </div>
                            <div>
                                <div class="card-body">

                                    <div class="element-panel">
                                        <div class="card ">
                                            <div class="card-header">Fireball</div>
                                            <div class="card-body">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                    illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                    interrete. Qui enim existimabit posse se miserum esse beatus non
                                                    erit. Qui est in parvis malis. Negabat igitur ullam esse artem, quae
                                                    ipsa a se proficisceretur; Hoc positum in Phaedro a Platone probavit
                                                    Epicurus sensitque in omni disputatione id fieri oportere. Utrum
                                                    igitur tibi litteram videor an totas paginas commovere? At iam
                                                    decimum annum in spelunca iacet. Is ita vivebat, ut nulla tam
                                                    exquisita posset inveniri voluptas, qua non abundaret.</p>
                                                <p>

                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-panel">
                                        <div class="card ">
                                            <div class="card-header">Heal</div>
                                            <div class="card-body">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                    illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                    interrete. Qui enim existimabit posse se miserum esse beatus non
                                                    erit. Qui est in parvis malis. Negabat igitur ullam esse artem, quae
                                                    ipsa a se proficisceretur; Hoc positum in Phaedro a Platone probavit
                                                    Epicurus sensitque in omni disputatione id fieri oportere. Utrum
                                                    igitur tibi litteram videor an totas paginas commovere? At iam
                                                    decimum annum in spelunca iacet. Is ita vivebat, ut nulla tam
                                                    exquisita posset inveniri voluptas, qua non abundaret.</p>
                                                <p>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.Semper enim ita adsumit aliquid, ut ea, quae
                                                    prima dederit, non deserat.De maximma autem re eodem modo, divina
                                                    mente atque natura mundum universum et eius maxima partis
                                                    administrari.In eo autem voluptas omnium Latine loquentium more
                                                    ponitur, cum percipitur ea, quae sensum aliquem moveat,
                                                    iucunditas.Tu enim ista lenius, hic Stoicorum more nos vexat.Haec
                                                    mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.Nihilne te delectat umquam -video,
                                                    quicum loquar-, te igitur, Torquate, ipsum per se nihil
                                                    delectat?Quicquid enim a sapientia proficiscitur, id continuo debet
                                                    expletum esse omnibus suis partibus;Ergo id est convenienter naturae
                                                    vivere, a natura discedere. Quo studio Aristophanem putamus aetatem
                                                    in litteris duxisse? Inde igitur, inquit, ordiendum est. Sed ad
                                                    haec, nisi molestum est, habeo quae velim. Haec et tu ita posuisti,
                                                    et verba vestra sunt. Consequentia exquirere, quoad sit id, quod
                                                    volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                    vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest
                                                    esse perversius. Iis igitur est difficilius satis facere, qui se
                                                    Latina scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                                <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum;
                                                    Cupit enim dícere nihil posse ad beatam vitam deesse sapienti.
                                                    Aliter enim explicari, quod quaeritur, non potest. Deinde disputat,
                                                    quod cuiusque generis animantium statui deceat extremum. Haec bene
                                                    dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Hoc est non
                                                    dividere, sed frangere.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-panel">
                                        <div class="card ">
                                            <div class="card-header">Shield</div>
                                            <div class="card-body">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                    illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                    interrete. Qui enim existimabit posse se miserum esse beatus non
                                                    erit. Qui est in parvis malis. Negabat igitur ullam esse artem, quae
                                                    ipsa a se proficisceretur; Hoc positum in Phaedro a Platone probavit
                                                    Epicurus sensitque in omni disputatione id fieri oportere. Utrum
                                                    igitur tibi litteram videor an totas paginas commovere? At iam
                                                    decimum annum in spelunca iacet. Is ita vivebat, ut nulla tam
                                                    exquisita posset inveniri voluptas, qua non abundaret.</p>
                                                <p>Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque
                                                    arripuit, interficit.Semper enim ita adsumit aliquid, ut ea, quae
                                                    prima dederit, non deserat.De maximma autem re eodem modo, divina
                                                    mente atque natura mundum universum et eius maxima partis
                                                    administrari.In eo autem voluptas omnium Latine loquentium more
                                                    ponitur, cum percipitur ea, quae sensum aliquem moveat,
                                                    iucunditas.Tu enim ista lenius, hic Stoicorum more nos vexat.Haec
                                                    mihi videtur delicatior, ut ita dicam, molliorque ratio, quam
                                                    virtutis vis gravitasque postulat.Nihilne te delectat umquam -video,
                                                    quicum loquar-, te igitur, Torquate, ipsum per se nihil
                                                    delectat?Quicquid enim a sapientia proficiscitur, id continuo debet
                                                    expletum esse omnibus suis partibus;Ergo id est convenienter naturae
                                                    vivere, a natura discedere. Quo studio Aristophanem putamus aetatem
                                                    in litteris duxisse? Inde igitur, inquit, ordiendum est. Sed ad
                                                    haec, nisi molestum est, habeo quae velim. Haec et tu ita posuisti,
                                                    et verba vestra sunt. Consequentia exquirere, quoad sit id, quod
                                                    volumus, effectum. Sic enim censent, oportunitatis esse beate
                                                    vivere. Nunc ita separantur, ut disiuncta sint, quo nihil potest
                                                    esse perversius. Iis igitur est difficilius satis facere, qui se
                                                    Latina scripta dicunt contemnere. Ubi ut eam caperet aut quando?</p>
                                                <p>Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum;
                                                    Cupit enim dícere nihil posse ad beatam vitam deesse sapienti.
                                                    Aliter enim explicari, quod quaeritur, non potest. Deinde disputat,
                                                    quod cuiusque generis animantium statui deceat extremum. Haec bene
                                                    dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Hoc est non
                                                    dividere, sed frangere.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-panel">
                                        <div class="card ">
                                            <div class="card-header">Light</div>
                                            <div class="card-body">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint
                                                    illa vendibiliora, haec uberiora certe sunt. Duo Reges: constructio
                                                    interrete. Qui enim existimabit posse se miserum esse beatus non
                                                    erit. Qui est in parvis malis. Negabat igitur ullam esse artem, quae
                                                    ipsa a se proficisceretur; Hoc positum in Phaedro a Platone probavit
                                                    Epicurus sensitque in omni disputatione id fieri oportere. Utrum
                                                    igitur tibi litteram videor an totas paginas commovere? At iam
                                                    decimum annum in spelunca iacet. Is ita vivebat, ut nulla tam
                                                    exquisita posset inveniri voluptas, qua non abundaret.</p>
                                                <p>&nbsp;</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="idbacaf316-9319-462a-9e0d-a1abecfdb738"> </div>
                        <div class="card rounded-0 border-0">
                            <div class="card-body pb-0">
                                <h1 class="card-title border-dark border-bottom">
                                    <span class="">Appendix</span>
                                </h1>
                            </div>
                            <div>

                            </div>
                            <div>
                                <div class="card-body">
                                    <div class="element-pdf">
                                        <img src="">
                                        <div class="text-muted font-italic text-center bg-light border">
                                            <small>Example character sheet of Eldon Hightower</small>
                                        </div>
                                        <br>
                                        <a target="_blank" class="btn btn-outline-primary" href="#">
                                            READ FULL PDF
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-video">
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <video controls="" allowfullscreen="" class="embed-responsive-item">
                                                <source src="#" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                        <div class="text-muted font-italic text-center bg-light border">
                                            <small>A quick look at the world of Arthas</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="element-audio">
                                        <audio controls="">
                                            <source src="#" type="audio/mpeg">
                                            Your browser does not support the audio tag.
                                        </audio>
                                        <div class="text-muted font-italic text-center bg-light border">
                                            <small>Battle music for your table</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Javascripts ready when needed -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>
body h1 {
  font-size: 1.4em;
}
body h2,
body h3,
body h4 {
  font-size: 1em;
}
body h1,
body h2,
body h3,
body h4 {
  line-height: 1.4;
}
#sideNav {
  z-index: 1000;
  top: 0;
  -webkit-transition-property: max-width, min-width, width, flex, visibility;
  transition-property: max-width, min-width, width, flex, visibility;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.collapse.width.show {
  visibility: visible;
}
.collapsing.width {
  visibility: visible;
  width: 0%;
  flex: 0%;
  -webkit-transition-property: max-width, min-width, width, flex, visibility;
  transition-property: max-width, min-width, width, flex, visibility;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

#view {
  position: relative;
}
/* HTML ELEMENT */
div.element-html h1,
div.element-html h2,
div.element-html h3 {
  color: #197278;
  font-weight: 600;
}
div.element-html ul {
  list-style: none;
}
div.element-html ul li {
  text-indent: -20px;
  margin-bottom: 3px;
}
div.element-html ul li:before {
  content: "■ ";
  margin-right: 3px;
  color: #BE1128;
}
/* GROUP COLLAPSE */
div.element-group > div.card.card-header {
  background-color: #197278;
  color: #ffffff;
}
div.element-group > div.card.card-header button {
  color: #ffffff;
  text-transform: uppercase;
}
div.element-group > div.card.card-header button:before {
  float: right !important;
  content: "\2212";
  padding: 0px 4px;
  margin-top: -1px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #197278;
  margin-left: 15px;
}
div.element-group > div.card.card-header button.collapsed:before {
  float: right !important;
  content: "\002b";
  padding: 0px 4px;
  margin-top: -1px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: white;
  margin-left: 15px;
}
/* PANEL CARD */
div.element-panel div.card div.card-header {
  background-color: #f16536;
  color: #FFFFFF;
}
div.element-panel div.card div.card-body {
  background-color: #feefeb;
}
div.element-panel > div.card > div.card-header > div.card-title {
  font-size: 1em !important;
}
div.element-panel h2,
div.element-panel h3,
div.element-panel h4 {
  font-size: 1em !important;
}