extra.html

    <!-- video -->
    <div class="w3-container">
        <!-- autoplay video script -->
        <script>
            const VideoController = function (isHovering, videoElement) {
                if (isHovering == true) {
                    videoElement.play();
                }
                else if (isHovering == false) {
                    videoElement.pause();
                }
            }
        </script>
        <div class="ci">
            <video class="ci" id="autoplay" width="75%" height="auto" onmouseenter='VideoController(true, this)'
                onmouseleave='VideoController(false, this)'>
                <source src="vids/wormhole-scene.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>


    </section>


    <!-- film section -->
    <h1 id="film" class="ct">Interstellar</h1>


    <div class="w3-container ci ct" style="width:fit-content;">
        <div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue w3-rightbar">
            <p>London is the most populous city in the United Kingdom,
                with a metropolitan area of over 9 million inhabitants.</p>
        </div>
    </div>

    <div class="w3-container">
        <p class="ct w3-xlarge gw-tooltip w3-tooltip">the crew used a
            <span class="w3-purple w3-text w3-tag w3-animate-opacity">wormhole</span>
            to traverse
            <span class="w3-blue w3-text w3-tag w3-animate-opacity">spacetime</span>
        </p>
    </div>

    <!-- image w/hover caption -->
    <div class="ct gw-tooltip w3-tooltip">
        <div class="ci">
            <img class="w3-round w3-opacity w3-hover-opacity-off" src="imgs/hole01.jpg" alt="image of hole 01"
                width="45%">
        </div>

        <p class="w3-animate-opacity ci w3-text">Wormhole from
            <a
                href="https://www.newscientist.com/article/2253157-travelling-through-a-wormhole-without-dying-may-actually-be-possible">
                New Scientist
            </a>
        </p>
        <!-- style="position:absolute;"  -->
    </div>


    <script>
        $(document).ready(function () {
            // Add smooth scrolling to all links
            $("a").on('click', function (event) {

                // Make sure this.hash has a value before overriding default behavior
                if (this.hash !== "") {
                    // Prevent default anchor click behavior
                    event.preventDefault();

                    // Store hash
                    var hash = this.hash;

                    // Using jQuery's animate() method to add smooth page scroll
                    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 800, function () {

                        // Add hash (#) to URL when done scrolling (default click behavior)
                        window.location.hash = hash;
                    });
                } // End if
            });
        });
    </script>






<div class="bigassdiv"></div>




<!-- <h1 class="ct ci houtspace" id="home">Introduction</h1> -->
<h1 class="ct ci outline center w3-margin-bottom">Branes, Bulks, Bends</h1>
<h4 class="ci ct ">This section will go over our universe and the interactions that occur around it.</h4>

<div class="w3-container compact-margins">
    <p class="w3-xlarge quote ct">
        Interstellar is a great movie with lots of real science concepts to learn.
        <br>
        <i>But the truth is not that simple.</i>
    </p>
</div>




<div class="w3-container compact-margins">
    <p class="w3-large quote ct">
        Let's start with going over some <b>key ideas</b> that will guide us through the rest of the site.
    </p>

    <div class="spacer"></div>

    <h2 class="ct ci outline w3-margin-bottom">THE BRANE</h2>

    <p class="w3-large quote ct">
        We live our lives in 3-dimensions.
        I'm going to define a term real quick.
    </p>
    <p class="w3-xlarge quote ct">

        <a class="swapme">brane</a>
    </p>

    <p class="w3-large quote ct">

        Take a look at the sphere below. This is what a 3d-sphere in our image of a however our entire
        universe is actually actually part of a 2-dimensional
        <a class="swapme">our brane</a>

    </p>

    <div class="spacer"></div>

    <h3 class="ct ci outline w3-margin-bottom">The Power of Jesus</h3>

    <p class="w3-large quote ct">
        We live our lives in 3-dimensions.
        I'm going to define a term real quick.
    </p>


    <div style="width:100%;">
        <div class="img-comp-container ci w3-center" style="width:50%;">
            <div class="img-comp-img">
                <p style="position:absolute;right:0;font-size:10vw;font-weight:600;">3d</p>
                <img src="imgs/sphere 01 universe.jpeg" width="750px" height="500px">
            </div>
            <div class="img-comp-img img-comp-overlay">
                <p style="position:absolute;left:0;font-size:10vw;font-weight:600;">2d</p>
                <img src="imgs/no water flat with water universe.png" width="750px" height="500px">
            </div>

            <!-- <div class="img-comp-img img-comp-overlay">
                <img src="imgs/wormhole grid 2.jpeg" width="auto" height="500px">
            </div> -->
        </div>
    </div>


</div>