Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <img-viewbox>
  <img id="vb-img" src="" />
</img-viewbox>
<header>
  <section>
    <h1>Coming of Age: Cultural Influence, Modern Difficulties, and What It Means to Me</h1>
    <h2>A Multimodal Text by Benjamin Pryor</h2>
  </section>
  <a id="mla-toggle" onclick="toggleMLA()">
    <svg viewBox="0 0 384 512" width="1.5em" title="file-word">
      <path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm57.1 120H305c7.7 0 13.4 7.1 11.7 14.7l-38 168c-1.2 5.5-6.1 9.3-11.7 9.3h-38c-5.5 0-10.3-3.8-11.6-9.1-25.8-103.5-20.8-81.2-25.6-110.5h-.5c-1.1 14.3-2.4 17.4-25.6 110.5-1.3 5.3-6.1 9.1-11.6 9.1H117c-5.6 0-10.5-3.9-11.7-9.4l-37.8-168c-1.7-7.5 4-14.6 11.7-14.6h24.5c5.7 0 10.7 4 11.8 9.7 15.6 78 20.1 109.5 21 122.2 1.6-10.2 7.3-32.7 29.4-122.7 1.3-5.4 6.1-9.1 11.7-9.1h29.1c5.6 0 10.4 3.8 11.7 9.2 24 100.4 28.8 124 29.6 129.4-.2-11.2-2.6-17.8 21.6-129.2 1-5.6 5.9-9.5 11.5-9.5zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" />
    </svg>
  </a>
</header>
<main>
  <mla-header>
    <p>Benjamin Pryor</p>
    <p>Professor Kiera</p>
    <p>English 1010-922</p>
    <p>8 December 2022</p>
    <p class="center">Coming of Age: Cultural Influence, Modern Difficulties, and What It Means to Me</p>
  </mla-header>
  <p><tab></tab><big-letter>C</big-letter><bl-linked>oming of age</bl-linked> is a topic that many people do not fully understand. Social, scientific, and personal views often conflict greatly on what it looks like, and for many people, there is a discrepancy between what they believe it is and what it turns out to be. Much of this conflict stems from ideas pushed by the classic view of coming of age.</p>
  <section class="img-right">
    <figure>
      <img class="fig-1" src="https://i.ibb.co/MGjtPZg/9780141359786-3433804917.jpg" />
      <p>Cover art of <i>Bridge to Terabithia</i> by Katherine Paterson</p>
    </figure>
    <div>
      <p><tab></tab>The coming-of-age narrative has been around for as long as literature itself. While cultural views on what exactly defines it change continually, the basic premise remains roughly the same: there is a point in life at which one must make the transition from childhood to adulthood. This step is instrumental to our development as individuals as well as to finding our place in society, but often it is not as cut-and-dry as these stories make it out to be. Many stories portray coming of age as something that takes place in a single moment. Whether that moment is a realization, a challenge, or a tragedy, it is always shown as the marker for the start of adulthood. A good example of this is the book <i>Bridge to Terabithia</i> (shown to the right), in which a boy struggles to deal with the death of his childhood friend. While the story itself is well-crafted and enjoyable, the message, in terms of growing up, is fundamentally flawed.</p>
      <p><tab></tab>This is due to the same fallacy that many coming-of-age stories portray: that a person is capable of growing up all at once. This idea, while harmless in theory, has led to numerous issues with how the average person approaches the coming-of-age process. The main reason for this is that the idea of a single moment in which one finally comes of age leaves little room for change or personal growth after the initial coming-of-age moment. This in turn leaves many people feeling stuck; incapable of adapting to overcome new challenges because they have been told their whole life that they cannot.</p>
    </div>
  </section>
  <section class="img-left">
    <figure>
      <img class="fig-2" src="https://i.ibb.co/3FRpyzJ/funny-grow-up-meme.png" />
      <p>A meme illustrating the feeling of lacking maturity</p>
    </figure>
    <div>
      <p><tab></tab>Other people, meanwhile, believe they have never experienced that moment at all and go their whole lives feeling as though they were left behind while everyone else matured. In either case, these mindsets leave people very likely to become averse to change of any kind. They also promote a lack of engagement with most things in life, as the feeling of being unable to change anything leads people to depression. This can clearly be seen reflected by modern culture, where depression and a strong dislike for change are now portrayed as the main sign of becoming an adult.</p>
      <p><tab></tab>This leads to a strong culture of cynicism in many adults, where they hate the way their life is but no longer have any motivation to change. They look back wistfully at their childhoods, often reminiscing about how optimistic they were and joking about how that optimism is now gone. In essence, this belief that personal growth cannot occur leads to a complete loss of any sense of hope or purpose.</p>
    </div>
  </section>
  <figure class="ss-wrapper">
    <span id="ss-counter"></span>
    <section class="slideshow">
      <a id="prev-btn" onclick="ssPrev()">
        <svg viewBox="0 0 256 512" width="1em" title="angle-left">
          <path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
        </svg>
      </a>
      <div id="ss-img">
        <img src="" />
        <img src="" />
      </div>
      <a id="next-btn" onclick="ssNext()">
        <svg viewBox="0 0 256 512" width="1em" title="angle-right">
          <path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
        </svg>
      </a>
    </section>
    <p>A collection of tweets and memes illustrating this cultural view</p>
  </figure>
  <p><tab></tab><big-letter>T</big-letter><bl-linked>his feeling</bl-linked> of hopelessness has been the new normal in modern culture for quite some time now. It is clearly reflected in movies, television shows, books, and other forms of mass media such as live streams, YouTube videos, chat apps, and social media. This is becoming an increasingly large issue as time goes on and children are exposed to these ideas earlier and earlier in life. While the notion of one experience leading to a person coming of age may be incorrect, there is no doubt that these types of experiences have a significant impact on the way a person grows up, especially throughout their developmental years. One study noted that <q>First, and foremost, a healthy, stable, encouraging, and protective home environment is critical to promote physical, mental, and emotional strength in children and adolescents</q> (Leidy and Gwin 1074). This includes the ideas that children are exposed to. Through early exposure to politics, cynicism, depression, abuse, and sexual content, internet usage has become a key cause of depression during the developmental stages of life. This in turn has resulted in an unprecedented number of people in the modern age developing clinical depression, and it has become a vicious cycle; each generation producing content that harms the next.</p>
  <blockquote>
    A healthy, stable, encouraging, and protective home environment is critical to promote physical, mental, and emotional strength
  </blockquote>
  <p><tab></tab>With the newfound exposure brought on by the internet, depression levels in young adults are skyrocketing. A study on the effects of growing up with depression states that <q>In the United States, approximately 16% of adults aged 18 to 24 years report having been diagnosed with depression at some point in their young lives</q> (Grob et al. 1392). However, the study also notes something rather interesting: it points out that many of the people interviewed believed that their battle with depression had shaped them into a better person. Several people noted that it led to finding new perspectives that helped them face day-to-day challenges in beneficial ways.</p>
  <section class="img-right">
    <figure>
      <img class="fig-3" src="https://i.ibb.co/yYSMK03/Figure-I-from-article-B.png" />
      <p>A figure from the Grob et al. study, showcasing individual improvement over time</p>
    </figure>
    <div>
      <p><tab></tab>That is not to say these individuals found a cure for their depression. Rather, what they found was the truth that the classic coming-of-age narrative does not address: no matter where a person is at in life, there is always room for personal growth. This is noted in the study as well: <q>As they recounted their histories and envisioned their futures, many participants acknowledged that cycles of depression have been and are likely to remain part of their lives. Most of this subset found that, with time, the low points in each successive cycle sank less far toward despair before curving back upward</q> (Grob et al. 1397-1398). This demonstrates just how important perspective is on an individual's coming-of-age process. Many people have disorders, illnesses, and mental health problems, but even people with these unchangeable disadvantages are capable of self-improvement. The study goes on to state that <q>A number of participants came to feel, with time, that cycles of depression informed their philosophical view of life. ‘Life has its ups and downs,’ said one young woman, and this is necessary because ‘. . . if it was all flat, you’re not living . . . That beeping machine in the hospital goes up and down for a reason, [and] . . . to feel the good you have to feel the bad.’</q> (Grob et al. 1397).</p>
    </div>
  </section>
  <blockquote>
    Life has its ups and downs . . . if it was all flat, you’re not living
  </blockquote>
  <p><tab></tab><big-letter>I</big-letter><bl-linked><ivsp></ivsp>find it</bl-linked> fascinatingly ironic that the solution to something as complicated as the question of coming of age appears to be so simple. Of course, like most things in life, it is a lot more complex in practice, but the concept remains the same. The perspective that you have on life will define the path your life will take. There does not have to be any specific coming of age moment, and there never has to be a point at which personal growth ceases. Every challenge, every hardship, and every new day is an opportunity to "come of age," because at the end of the day, nobody ever truly grows up, we simply grow.</p>
  <p>Many people every day face circumstances in which life appears bleak: stress, depression, an unfulfilling job, the death of a loved one, etc. Through all of those situations, there is hope. If you see every negative not as a setback, but as an opportunity to grow, then you no longer have to follow in the footsteps of the negative influences in your life. Growing up does not have to come with a loss of optimism and joy. Perhaps, at the end of the day, those who maintain joy and keep a positive outlook, even in negative times, are the most grown up of anyone.
    <svg class="end-mark" viewBox="0 0 448 512" width="0.5em" title="check-square">
      <path fill="currentColor" d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z" />
    </svg>
  </p>
  <section class="works-cited">
    <a id="wc-collapse" onclick="toggleWorksCited()">
      <svg viewBox="0 0 320 512" width="1em" title="chevron-right">
        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
      </svg>
      Works Cited
    </a>
    <p>Grob, Rachel, et al. “Stumbling into Adulthood: Learning from Depression While Growing Up.” <i>Qualitative Health Research</i>, vol. 30, no. 9, 4 May 2020, pp. 1392–1408, 10.1177/1049732320914579.</p>
    <p>Leidy, Heather J., and Jess A. Gwin. “Growing up Strong: The Importance of Physical, Mental, and Emotional Strength during Childhood and Adolescence with Focus on Dietary Factors.” <i>Applied Physiology, Nutrition, and Metabolism</i>, vol. 45, no. 10, Oct. 2020, pp. 1071–1080, 10.1139/apnm-2020-0058.</p>
  </section>
</main>
<footer>
  <p>Copyright &copy; 2022 Benjamin Pryor</p>
  <nav>
    <a href="https://programmer2514.github.io/" target="_blank">My Projects</a>
    <a href="https://programmer2514.github.io/about.html" target="_blank">About</a>
    <a href="https://programmer2514.github.io/contact.html" target="_blank">Contact</a>
  </nav>
</footer>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Raleway:200");

html, body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.06rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(rgba(42, 42, 46, 0.8), rgba(42, 42, 46, 0.9)), url("https://images.unsplash.com/photo-1464030871258-a01dfd38220a?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzAzODc1MjQ&ixlib=rb-4.0.3&q=80");
  background-size: 100vw auto;
  background-attachment: fixed;
  color: rgb(224, 224, 228);
}

img {
  cursor: zoom-in;
}

img-viewbox {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: none;
}

img-viewbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
}

header {
  transition: margin 250ms ease,
              padding 250ms ease;
  padding: 1em 8em;
  margin: 0 14em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-top: 0;
  background: rgb(32, 32, 36);
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header section {
  flex-grow: 1;
  margin-right: 2.5em;
}

header h1 {
  margin: 0;
  margin-bottom: 0.35em;
  font-size: 1.5em;
  color: rgb(250, 250, 254);
}

header h2 {
  margin: 0;
  font-size: 1em;
  color: rgb(128, 128, 132);
}

header a {
  transition: right 250ms ease,
              color 250ms ease;
  color: rgb(196, 196, 200);
  cursor: pointer;
  position: absolute;
  right: 8em;
}

header a::before {
  color: rgb(224, 224, 228);
  transition: max-width 250ms ease,
              padding 250ms ease;
  display: inline-block;
  vertical-align: -5%;
  content: "Toggle MLA Mode";
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  background: rgba(32, 32, 36, 0.75);
  border-radius: 0.375em;
  padding: 0.375em 0;
}

header a:hover {
  color: rgb(224, 224, 228);
}

header a:hover::before {
  max-width: 10em;
  padding: 0.375em;
}

main {
  margin: 0 14em 2.5em 14em;
  padding: 1em 8em;
  min-height: calc(100vh - 10.85em);
  line-height: 1.75em;
  background: rgb(32, 32, 36);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 250ms ease,
              background 250ms ease,
              margin 250ms ease,
              padding 250ms ease,
              line-height 250ms ease,
              width 250ms ease,
              max-width 250ms ease,
              font-size 250ms ease,
              font-family 250ms ease;
}

main p {
  text-justify: inter-word;
  text-align: justify;
  margin: 1em 0;
}

main section {
  overflow: hidden;
  margin: 0;
}

main section figure p {
  font-size: 0.75em;
  margin: 0;
  text-align: center;
}

big-letter {
  float: left;
  font-size: 4em;
  font-family: "Times New Roman", sans-serif;
  font-weight: 500;
  margin: 0.225em 0.08em 0 0;
}

bl-linked {
  text-transform: uppercase;
}

mla-header {
  display: none;
}

tab, ivsp {
  display: inline-block;
  width: 0;
}

blockquote {
  font-family: Raleway, sans-serif;
  font-weight: 200;
  font-size: 1.8em;
  line-height: 1.5em;
  color: rgb(156, 156, 160);
  margin: 1em 2em;
}

blockquote::before {
  position: absolute;
  content: "“";
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 1.8em;
  line-height: 1.5em;
  transform: translate(-0.5em, -0.35em);
}

blockquote::after {
  position: absolute;
  content: "”";
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 1.8em;
  line-height: 1.5em;
  transform: translate(0.18em, -0.3em);
}

footer {
  padding: 1em;
  font-size: 0.75em;
  background: rgb(0, 0, 0);
  border-top: 1px solid rgb(37, 29, 29);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: calc(100vw - 2em);
  color: rgb(241, 241, 243);
}

footer p {
  margin: 0;
}

footer a {
  padding-left: 1em;
  text-decoration: none;
  color: rgb(154, 154, 172);
}

footer a:hover {
  color: rgb(241, 241, 243);
}

.center {
  text-align: center;
}

.slideshow {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 0.5em;
}

.slideshow div {
  margin: 0;
  height: 100%;
  width: 75%;
}

.slideshow img {
  max-height: 50vh;
  max-width: 70vw;
  left: 50vw;
  transform: translate(-50%, calc(25vh - 50%));
  position: absolute;
  transition: opacity 250ms ease;
  opacity: 0;
}

.slideshow a {
  padding: 5% 1em;
  margin: 1em;
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1em;
  cursor: pointer;
  transition: background 250ms ease;
  z-index: 50;
}

.slideshow a:hover {
  background: rgba(255, 255, 255, 0.5);
}

.ss-wrapper {
  margin: 1em 2em;
}

.ss-wrapper p {
  font-size: 0.75em;
  margin: 0;
  text-align: center;
}

.ss-wrapper span {
  font-size: 1em;
  position: absolute;
  transform: translate(1em, 0.5em);
  color: rgb(128, 128, 132);
  z-index: 50;
}

.img-right figure {
  float: right;
  margin: 1em 2em;
}

.img-left figure {
  float: left;
  margin: 1em 2em;
}

.fig-1 {
  height: 32em;
  margin: 0;
}

.fig-2 {
  height: 20em;
  margin: 0;
}

.fig-3 {
  height: 18em;
  margin: 0;
}

.works-cited {
  background: rgba(0, 0, 0, 0.25);
  padding: 1em 2em;
  border-radius: 0.5em;
}

.works-cited a {
  display: block;
  cursor: pointer;
  transform: translateY(-0.25em);
}

.works-cited p {
  text-indent: -0.5in;
  text-align: left;
  padding-left: 0.5in;
  overflow: hidden;
  max-height: 0px;
  margin: 0;
  transition: max-height 250ms ease,
              margin 250ms ease;
}

.works-cited svg {
  padding-right: 0.5em;
  transform: translateY(0.5em);
  transition: transform 250ms ease;
}

@media only screen and (max-width: 1480px) {
  main {
    padding: 1em 5em;
    margin: 0 5em 2.5em 5em;
  }
  header {
    padding: 1em 5em;
    margin: 0 5em;
  }
  header a {
    right: 5em;
  }
}

@media only screen and (max-width: 1200px) {
  main {
    padding: 1em 2em;
    margin: 0 0 2.5em 0;
  }
  header {
    padding: 1em 2em;
    margin: 0;
  }
  header a {
    right: 2em;
  }
}
!

JS 

              
                var MLAEnabled = false;
var WCEnabled = false;
var viewBox = null;
var vbImg = null;
var ssImg = null;
var ssCounter = null;
var ssIndex = 0;
var ssImages = ['https://i.ibb.co/3SL57qL/1.jpg',
                'https://i.ibb.co/7yktn0R/2.png',
                'https://i.ibb.co/4PczxFT/3.png',
                'https://i.ibb.co/P4WD3VJ/4.jpg',
                'https://i.ibb.co/ZKj3JWf/5.png',
                'https://i.ibb.co/w7F7jRp/6.png'];

document.body.onload = () => {
  var images = document.getElementsByTagName("img");
  viewBox = document.getElementsByTagName('img-viewbox')[0];
  vbImg = document.getElementById('vb-img');
  ssImg = document.getElementById('ss-img').children;
  ssCounter = document.getElementById('ss-counter');
  
  Array.from(images).forEach((image) => {
    image.addEventListener('click', () => {
      expandImage(image);
    });
  });
  viewBox.addEventListener('click', () => {
    viewBox.style.display = 'none';
  });
  vbImg.addEventListener('click', (event) => {
    window.open(vbImg.getAttribute('src'), '_blank');
    event.stopPropagation();
  });
  
  ssUpdate();
};

function ssPrev() {
  ssIndex -= 1;
  if (ssIndex < 0)
    ssIndex = ssImages.length - 1;
  ssUpdate();
}

function ssNext() {
  ssIndex += 1;
  if (ssIndex >= ssImages.length)
    ssIndex = 0;
  ssUpdate();
}

function ssUpdate() {
  ssCounter.innerHTML = (ssIndex + 1) + ' / 6';
  ssImg[ssIndex % 2].setAttribute('src', ssImages[ssIndex]);
  ssImg[ssIndex % 2].style.opacity = '1';
  ssImg[ssIndex % 2].style.pointerEvents = 'auto';
  ssImg[(ssIndex + 1) % 2].style.opacity = '0';
  ssImg[(ssIndex + 1) % 2].style.pointerEvents = 'auto';
}

function expandImage(image) {
  vbImg.setAttribute('src', image.getAttribute('src'));
  viewBox.style.display = 'initial';
}

function toggleWorksCited() {
  if (WCEnabled) {
    document.getElementById('wc-stylesheet')?.remove();
    WCEnabled = false;
  } else {
    var WCStyle = document.createElement('style');
    WCStyle.setAttribute('id', 'wc-stylesheet');
    WCStyle.appendChild(document.createTextNode(""));
    document.head.appendChild(WCStyle);
    WCStyle.sheet.insertRule('.works-cited p { max-height: 5em; margin: 1em 0; }', 0);
    WCStyle.sheet.insertRule('.works-cited svg { transform: translate(-0.25em, 0.75em) rotate(90deg); }', 0);
    WCEnabled = true;
  }
}

function toggleMLA() {
  if (MLAEnabled) {
    document.getElementById('mla-stylesheet')?.remove();
    MLAEnabled = false;
  } else {
    var MLAStyle = document.createElement('style');
    MLAStyle.setAttribute('id', 'mla-stylesheet');
    MLAStyle.appendChild(document.createTextNode(""));
    document.head.appendChild(MLAStyle);
    MLAStyle.sheet.insertRule(`
      main {
        background: white;
        font-family: "Times New Roman", sans-serif;
        font-size: 12pt;
        font-weight: normal;
        padding: 1in;
        line-height: 2em;
        color: black;
        width: 8.5in;
        max-width: calc(100vw - 2in - 2em);
        margin: 2em auto;
      }`, 0);
    MLAStyle.sheet.insertRule(`
      .works-cited a {
        cursor: auto;
        transform: none;
        text-align: center;
        margin-top: 2.5in;
      }`, 0);
    MLAStyle.sheet.insertRule(`
      big-letter {
        float: none;
        font-size: inherit;
        font-family: inherit;
        margin: 0;
      }`, 0);
    MLAStyle.sheet.insertRule('main p { margin: 0; text-align: left; }', 0);
    MLAStyle.sheet.insertRule('mla-header { display: initial; }', 0);
    MLAStyle.sheet.insertRule('blockquote { display: none; }', 0);
    MLAStyle.sheet.insertRule('tab { width: 0.5in; }', 0);
    MLAStyle.sheet.insertRule('ivsp { width: 0.25em; }', 0);
    MLAStyle.sheet.insertRule('bl-linked { text-transform: none; }', 0);
    MLAStyle.sheet.insertRule('header { margin: 0; padding: 1em 2em; }', 0);
    MLAStyle.sheet.insertRule('header a { right: 2em; }', 0);
    MLAStyle.sheet.insertRule('.slideshow a { background: rgba(255, 255, 255, 0.75); }', 0);
    MLAStyle.sheet.insertRule('.ss-wrapper span { color: rgb(0, 0, 0); }', 0);
    MLAStyle.sheet.insertRule('.slideshow { background: rgba(0, 0, 0, 0.5); }', 0);
    MLAStyle.sheet.insertRule('.works-cited { background: 0; padding: 0; }', 0);
    MLAStyle.sheet.insertRule('.works-cited p { max-height: 50em; }', 0);
    MLAStyle.sheet.insertRule('.works-cited svg { display: none; }', 0);
    MLAStyle.sheet.insertRule('.end-mark { display: none; }', 0);
    MLAEnabled = true;
  }
};
!
999px

Console