<section class="code-block">
            <nav class="nav-block" id="#nav">
                <a href="#slide-one">One</a>
                <a href="#slide-two">Two</a>
                <a href="#slide-three">Three</a>
                <a href="#slide-four">Four</a>
            </nav>
            <div id="intro">
                <p>How well is this going to work? I'm going solely off what I can remember and VS Code's autofill. I'll give this another go some other day with more reliable and better methods.
            </div>
            <div id="slide-one">
                <h1>Slide One</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium consequat nunc quis ornare. Nunc consectetur blandit nunc eu imperdiet. Duis vitae leo justo. Praesent et posuere ante. Mauris vitae ante id tellus lacinia pulvinar.</p>
            </div>
            <div id="slide-two">
                <h1>Slide Two</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Mauris sed nisl dui. Vestibulum ut nulla volutpat, porta nisi vel, hendrerit tortor. Aenean sagittis vehicula arcu, ac blandit dolor. Vestibulum et leo vel quam faucibus ultricies. </p>
            </div>
            <div id="slide-three">
                <h1>Slide Three</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Donec libero risus, malesuada a enim finibus, elementum tempor nisl. Donec faucibus hendrerit leo, nec dictum nisl accumsan sed. Fusce vestibulum sodales nulla, eget gravida lectus lacinia et. </p>
            </div>
            <div id="slide-four">
                <h1>Slide Four</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Proin diam nisl, rhoncus at dolor sed, condimentum imperdiet felis. Donec venenatis eros et massa suscipit, ac congue neque volutpat. Phasellus maximus augue at iaculis consectetur. </p>
            </div>

        </section>

section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                margin: 1rem auto;
                background-color: #eee;
                min-height: 50vh;
                overflow-y: hidden;
                overflow-x: scroll;
                position: relative;
                scroll-behavior: smooth;
                max-width: 60em;
            }
            .nav-block {
                display: block;
                min-height:1rem;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                writing-mode: vertical-lr;
                padding: .5rem;
            }
            .nav-block a {
                display: inline-block;
                padding: .5rem .25rem;
                text-decoration: none;
                font-weight: bold;
                margin: .25rem;
                color: white;
            }

            .nav-block a:hover, .nav-block a:focus {
                background-color: rgba(0,0,0,0.25);
            }

            .code-block div {
                display: block;
                width:100%;
                min-height: 400px;
                height: 100%;
                background: gray;
                padding: 1em;
                position: absolute;
                top:0;
                scroll-snap-type: proximity;
            }

            .code-block div > h1, .code-block div > p > a {
								font-size: 1rem;
                transition: all .75s ease-out;
                text-decoration: none;
            }
            
            .code-block div:target > h1 {
                transform: translateY(-5px);
                color: orange;
            }

            .code-block div:target > p > a {
                color: #333;
            }

            #intro {
                background-image: linear-gradient(90deg, red, gray);
                padding-left: 4rem;
                color: white;
                font-weight: bold;
                font-size: 1.5rem;
            }

            #slide-one {
                left: 100%;
            }
            #slide-two {
                left: 200%;
            }
            #slide-three {
                left: 300%;
            }
            #slide-four {
                left: 400%;
            }
            .columns {
                columns: 2;
                column-gap: .5rem;
                font-family: Georgia, 'Times New Roman', Times, serif;
                color: #dedede;
                font-size: 1.25rem;
                line-height: 1.5;
            }