Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

+ 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.

Behavior

Save Automatically?

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

              
                <body>
  <nav id="navbar">
    <header>
      <h1 class="articlename">Mastering</h1>
      <h1 class="articlename">Markdown</h1>
    </header>
    <div class="navcont">
      <a class="nav-link" href="#introduction">Introduction</a>
      <a class="nav-link" href="#what_is_markdown">What is Markdown</a>
      <a class="nav-link" href="#examples">Examples</a>
      <a class="nav-link" href="#basic_syntax">Basic Syntax</a>
      <a class="nav-link" href="#github_flavored_markdown">GitHub Flavored Markdown</a>
    </div>
  </nav>
  <main id="main-doc">
    <section id="introduction" class="main-section">
      <header>
        <h2>Introduction</h2>
      </header>
      <hr>
      <p>Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.</p>
      <h3>What you will learn:</h3>
      <ul>
        <li>How the Markdown format makes styled collaborative editing easy</li>
        <li>How Markdown differs from traditional formatting approaches</li>
        <li>How to use Markdown to format text</li>
        <li>How to leverage GitHub’s automatic Markdown rendering</li>
        <li>How to apply GitHub’s unique Markdown extensions</li>
      </ul>

    </section>
    <section id="what_is_markdown" class="main-section">
      <header>
        <h2>What is Markdown</h2>
      </header>
      <hr>
      <p><a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown</a>
        is a way to style text on the web. You control the display of the document;
        formatting words as bold or italic, adding images, and creating lists are
        just a few of the things we can do with Markdown. Mostly, Markdown is just
        regular text with a few non-alphabetic characters thrown in, like <code class="pcode">#</code> or <code class="pcode">*</code>.</p>
      <p>You can use Markdown most places around GitHub:</p>
      <ul>
        <li><a href="https://gist.github.com/" target="_blank">Gists</a></li>
        <li>Comments in Issues and Pull Requests</li>
        <li>Files with the <code class="pcode">.md</code> or <code class="pcode">/markdown</code> extension</li>
      </ul>
      <p>For more information, see “<a href="https://help.github.com/categories/writing-on-github/" target="_blank">
          Writing on GitHub</a>” in the <span>GitHub Help.</span></p>
    </section>

    <section id="examples" class="main-section">
      <header>
        <h2>Examples</h2>
      </header>
      <hr>
      <div class="tabs">
        <input type="radio" name="tabs" id="text" checked="checked">
        <label for="text">Text</label>
        <div class="tab">
          <div class="stdStyle">
            <code>It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http://google.com)</code>
          </div>
          <div class="lowerStyle">
            <p>It's very easy to make some words <b>bold</b> and other words <i>italic</i> with Markdown. You can even <a href="https://google.com" target="_blank">link to Google!</a></p>
          </div>
        </div>

        <input type="radio" name="tabs" id="lists">
        <label for="lists">Lists</label>
        <div class="tab">
          <div class="stdStyle">
            <code>Sometimes you want numbered lists:</code>
            <p><code>1. One
                2. Two
                3. Three</code></p>
            <p><code>Sometimes you want bullet points:</code></p>
            <p><code>* Start a line with a star
                * Profit!</code></p>
            <p><code>Alternatively,</code></p>
            <p><code>- Dashes work just as well
                - And if you have sub points, put two spaces before the dash or star:</code></p>
            <code><span class="twoSpaces">- Like this</span></code>
            <code><span class="twoSpaces">- And this</span></code>
          </div>
          <div class="lowerStyle">
            <p>Sometimes you want numbered lists:</p>
            <ol>
              <li>One</li>
              <li>Two</li>
              <li>Three</li>
            </ol>
            <p>Sometimes you want bullet points:</p>
            <ul>
              <li> Start a line with a star</li>
              <li> Profit!</li>
            </ul>
            <p>Alternatively,</p>
            <ul>
              <li>Dashes work just as well</li>
              <li>And if you have sub points, put spaces before the dash or star:
                <ul>
                  <li>Like this</li>
                  <li>And this</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>

        <input type="radio" name="tabs" id="images">
        <label for="images">Images</label>
        <div class="tab">
          <div class="stdStyle">
            <code>If you want to embed images, this is how you do it:&#10;</code>
            <code>![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)</code>
          </div>
          <div class="lowerStyle">
            <p>If you want to embed images, this is how you do it:</p>
            <img src="https://octodex.github.com/images/yaktocat.png" alt="yaktocat">
          </div>
        </div>

        <input type="radio" name="tabs" id="headers_quotes">
        <label for="headers_quotes">Headers & Quotes</label>
        <div class="tab">
          <div class="stdStyle">
            <p><code># Structured documents</code></p>
            <p><code>Sometimes it's useful to have different levels of headings to structure your documents. Start lines with a `#` to create headings. Multiple `##` in a row denote smaller heading sizes.</code></p>
            <p><code>### This is a third-tier heading</code></p>
            <p><code>You can use one `#` all the way up to `######` six for different heading sizes.</code></p>
            <p><code>If you'd like to quote someone, use the > character before the line:</code></p>
            <code>&gt; Coffee. The finest organic suspension ever devised... I beat the Borg with it.
              &gt; - Captain Janeway</code>
          </div>
          <div class="lowerStyle">
            <h1>Structured documents</h1>
            <hr>
            <p>Sometimes it’s useful to have different levels of headings to structure your documents. Start lines with a <code class="pcode">#</code> to create headings. Multiple <code class="pcode">##</code> in a row denote smaller heading sizes.</p>
            <h3>This is a third-tier heading</h3>
            <p>You can use one <code class="pcode">#</code> all the way up to <code class="pcode">######</code> six for different heading sizes.</p>
            <p>If you’d like to quote someone, use the > character before the line:</p>
            <p class="quote"> Coffee. The finest organic suspension ever devised... I beat the Borg with it.</p>
            <p class="quote"> - Captain Janeway</p>
          </div>
        </div>

        <input type="radio" name="tabs" id="code">
        <label for="code">Code</label>
        <div class="tab">
          <div class="stdStyle">
            <code>There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks: `var example = true`. If you've got a longer block of code, you can indent with four spaces:</code>
            <p>
              <code><span class="fourSpaces">if (isAwesome){</span>
                <span class="fourSpaces"><span class="twoSpaces">return true</span></span>
                <span class="fourSpaces">}</span>
              </code>
            </p>
            <code>GitHub also supports something called code fencing, which allows for multiple lines without indentation:</code>
            <p><code>
                ```
                if (isAwesome){
                <span class="twoSpaces">return true</span>
                }
                ```
              </code></p>
            <code>And if you'd like to use syntax highlighting, include the language:</code>
            <code>
              ```javascript
              if (isAwesome){
              <span class="twoSpaces">return true</span>
              }
              ```</code>
          </div>
          <div class="lowerStyle">
            <p>There are many different ways to style code with GitHub’s markdown. If you have inline code blocks, wrap them in backticks: <code class="pcode">var example = true</code>. If you’ve got a longer block of code, you can indent with four spaces:</p>
            <div class="stdStyle">
              <code>if (isAwesome){
                <span class="twoSpaces">return true</span>
                }</code>
            </div>
            <p>GitHub also supports something called code fencing, which allows for multiple lines without indentation:</p>
            <div class="stdStyle">
              <code>if (isAwesome){
                <span class="twoSpaces">return true</span>
                }</code>
            </div>
            <p>And if you’d like to use syntax highlighting, include the language:</p>
            <div class="stdStyle">
              <code><span class="colorhere">if</span> (isAwesome){
                <span class="twoSpaces colorhere">return true</span>
                }</code>
            </div>
          </div>
        </div>

        <input type="radio" name="tabs" id="extras">
        <label for="extras">Extras</label>
        <div class="tab">
          <div class="stdStyle">
            <p><code>GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey @kneath — love your sweater!</code></p>
            <p><code>But I have to admit, tasks lists are my favorite:</code></p>
            <p><code>- [x] This is a complete item&#10;- [ ] This is an incomplete item</code></p>
            <p><code>When you include a task list in the first comment of an Issue, you will see a helpful progress bar in your list of issues. It works in Pull Requests, too!</code></p>
            <code>And, of course emoji!</code>
          </div>
          <div class="lowerStyle">
            <p>GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey <a href="https://github.com/kneath" title="to kneath">&commat;kneath</a> — love your sweater!</p>
            <p>But I have to admit, tasks lists are my favorite:</p>
            <p><span class="fourSpaces">&#9745;This is a complete item</span></p>
            <p><span class="fourSpaces">&#9744;This is an incomplete item</span></p>
          </div>
        </div>
      </div>
    </section>

    <section id="basic_syntax" class="main-section">
      <header>
        <h2>Basic Syntax</h2>
      </header>
      <hr>
      <p>Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.</p>
      <h3>Headers</h3>
      <div class="stdStyle">
        <code># This is an &lt;h1&gt; tag
          ## This is an &lt;h2&gt; tag
          ###### This is an &lt;h6&gt; tag
        </code>
      </div>
      <h3>Emphasis</h3>
      <div class="stdStyle">
        <code>*This text will be italic*
          _This will also be italic_&#10;
          **This text will be bold**
          __This will also be bold__&#10;
          _You **can** combine them_
        </code>
      </div>
      <h3>Lists</h3>
      <h4>Unordered</h4>
      <div class="stdStyle">
        <code>* Item 1
          * Item 2
          <span class="twoSpaces">* Item 2a</span>
          <span class="twoSpaces">* Item 2b</span></code>
      </div>

      <h4>Ordered</h4>
      <div class="stdStyle">
        <code>1. Item 1
          2. Item 2
          3. Item 3
          <span class="threeSpaces">1. Item 3a</span>
          <span class="threeSpaces">1. Item 3b</span></code>
      </div>

      <h4>Images</h4>
      <div class="stdStyle">
        <code>![GitHub Logo](/images/logo.png)
          Format: ![Alt Text](url)</code>
      </div>

      <h4>Links</h4>
      <div class="stdStyle">
        <code>http://github.com - automatic!
          [GitHub](http://github.com)</code>
      </div>

      <h4>Blockquotes</h4>
      <div class="stdStyle">
        <code>As Kanye West said:&#10;
          > We're living the future so
          > the present is our past.</code>
      </div>

      <h4>Inline Code</h4>
      <div class="stdStyle">
        <code>I think you should use an
          `&lt;addr&gt;` element here instead.</code>
      </div>
    </section>

    <section id="github_flavored_markdown" class="main-section">
      <header>
        <h2>GitHub Flavored Markdown</h2>
      </header>
      <hr>
      <p>GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.</p>
      <p>Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.</p>
      <h3>Syntax Highlighting</h3>
      <p>Here’s an example of how you can use syntax highlighting with <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/" target="_blank">GitHub Flavored Markdown</a>:</p>

      <div class="stdStyle">
        <code>```javascript
          function fancyAlert(arg) {
          <span class="twoSpaces">if(arg) {</span>
          <span class="fourSpaces">$.facebox({div:'#foo'})</span>
          <span class="twoSpaces">}</span>
          }
          ```</code>
      </div>
      <p>You can also simply indent your code by four spaces:</p>
      <div class="stdStyle addtional_indent">
        <code>function fancyAlert(arg) {
          <span class="twoSpaces">if(arg) {</span>
          <span class="fourSpaces">$.facebox({div:'#foo'})</span>
          <span class="twoSpaces">}</span>
          }</code>
      </div>
      <p>Here’s an example of Python code without syntax highlighting:</p>
      <div class="stdStyle">
        <code>def foo():
          <span class="fourSpaces">if not bar:</span>
          <span class="fourSpaces"><span class="fourSpaces">return True</span></span></code>
      </div>
      <h3>Task Lists</h3>
      <p>If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!</p>
      <div class="stdStyle">
        <code>- [x] @mentions, #refs, [links](), **formatting**, and &lt;del&gt;tags&lt;/del&gt; supported
          - [x] list syntax required (any unordered or ordered list supported)
          - [x] this is a complete item
          - [ ] this is an incomplete item</code>
      </div>

      <h3>Tables</h3>
      <p>You can create tables by assembling a list of words and dividing them with hyphens <code class="pcode">-</code> (for the first row), and then separating each column with a pipe <code class="pcode">|</code>:</p>
      <div class="stdStyle">
        <code>First Header | Second Header
          ------------ | -------------
          Content from cell 1 | Content from cell 2
          Content in the first column | Content in the second column</code>
      </div>

      <table>
        <caption>Would become:</caption>
        <tr>
          <th>First Header</th>
          <th>Second Header</th>
        </tr>
        <tr>
          <td>Content from cell 1</td>
          <td>Content from cell 2</td>
        </tr>
        <tr>
          <td>Content in the first column</td>
          <td>Content in the second column</td>
        </tr>
      </table>

      <h3>SHA references</h3>
      <p>Any reference to a commit’s <a href="http://en.wikipedia.org/wiki/SHA-1" target="_blank">SHA-1 hash</a> will be automatically converted into a link to that commit on GitHub.</p>
      <div class="stdStyle">
        <!-- this does not wrap inside the container for RWD-->
        <code>16c999e8c71134401a78d4d46435517b2271d6ac
          mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
          mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac</code>
      </div>
      <h3>Issue references within a repository</h3>
      <p>Any number that refers to an Issue or Pull Request will be automatically converted into a link.</p>
      <div class="stdStyle">
        <code>#1
          mojombo#1
          mojombo/github-flavored-markdown#1</code>
      </div>
      <h3>Username @mentions</h3>
      <p>Typing an <code class="pcode">@</code> symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re <span class="italic">mentioning</span> the individual. You can also @mention teams within an organization.</p>
      <h3>Automatic linking for URLs</h3>
      <p>Any URL (like <code class="pcode">http://www.github.com/</code> ) will be automatically converted into a clickable link.</p>
      <h3>Strikethrough</h3>
      <p>Any word wrapped with two tildes (like <code class="pcode">~~this~~</code> ) will appear crossed out.</p>
      <h3>Emoji</h3>
      <p>GitHub supports <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/#using-emoji" target="_blank">emoji</a>!</p>
      <p>To see a list of every image we support, check out the <a href="https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md" target="_blank">Emoji Cheat Sheet</a>.</p>
      <h3>Attribution</h3>
      <p><a href="https://guides.github.com/" target="_blank">GitHub Guides</a><span> - </span><a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Mastering Markdown</a></p>
    </section>

  </main>
  <footer>
    <div class="footer">
      <div class="pfcc">
        A Project in the
        <a href="https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects" target="_blank">
          <img src="https://aws1.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg" alt="freeCodeCamp" width="134" height="15" /></a><!-- width = 152, height = 17 originally-->
        Responsive Web Design Course
      </div>
    </div>
  </footer>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

</html>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Suez+One&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --navbarWidth: 250px;
}

body,
html {
  background-color: white;
  font-family: "Noto Sans", sans-serif;
  line-height: 2rem;
  font-size: 10px;
  padding: 0;
}

#navbar {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(92,960,440)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.15'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: contain;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--navbarWidth);
  z-index: 0;
}

.articlename {
  font-family: "Suez One", serif;
  font-size: 3.3rem;
  color: rgb(39, 36, 36);
  margin: 1.7rem;
  /*width: 100%;*/
}

.navcont {
  background-color: rgb(255, 255, 255, 0.7);
}

.nav-link {
  display: block;
  padding: 2rem;
  font-size: 1.5rem;
  color: black;
  font-weight: 700;
  border: 1px solid black;
  border-style: solid solid none;
  text-decoration: none;
}

.nav-link:last-of-type {
  border-bottom: 1px solid black;
}

.nav-link:hover {
  background-color: black;
  color: white;
  transition: background ease 0.2s;
}

#main-doc {
  margin-left: 210px;
}

.main-section {
  font-size: 1.5rem;
  max-width: 650px;
  line-height: 3rem;
  margin-left: 10rem;
  padding: 0.5rem;
}

h2,
h3 {
  margin-top: 3rem;
}

h4 {
  margin: 1rem 0 0 2rem;
}

.pcode {
  border: 1px solid grey;
  border-radius: 3px;
  background-color: #f5f5f5;
  padding: 0 0.5rem 0.2rem 0.5rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

.stdStyle {
  /*font-family: monospace;*/
  font-size: 14px;
  border: 1px solid grey;
  background-color: #f5f5f5;
  padding: 0 2rem 2rem;
  line-height: 2.2rem;
  white-space: pre-line;
}

.addtional_indent {
  padding-left: 4em;
}

.lowerStyle {
  border: 1px solid grey;
  border-top: none;
  padding: 2rem 2rem 2rem;
}

.lowerStyle > img {
  max-width: 100%;
  border: 1px solid #9e9e9e;
}

.lowerStyle > .quote {
  border-left: 5px solid #9e9e9e;
  padding-left: 8px;
}

.lowerStyle > p.quote + p {
  margin-top: 0;
}

.colorhere {
  color: darkmagenta;
}

.twoSpaces::before {
  /*background-color: red;  remove when done troubleshooting */
  content: "\00a0\00a0";
}

.threeSpaces::before {
  /*background-color: red;  remove when done troubleshooting */
  content: "\00a0\00a0\00a0";
}

.fourSpaces::before {
  /*background-color: red;  remove when done troubleshooting */
  content: "\00a0\00a0\00a0\00a0";
}

p {
  margin-top: 0.6rem;
}

p > div,
pre {
  font-family: monospace;
  font-size: 14px;
}

/*  Borrowed from codepen code tabs using pure CSS  */

.tabs {
  display: flex;
  flex-wrap: wrap; /* make sure it wraps*/
}

.tabs label {
  order: 1; /* Put the labels first */
  display: block;
  padding: 0.1rem 1.5rem;
  /*  margin 1rem for top to put some space between the line and the tabs
                auto auto to center the tabs in between the block (it won't center
                precisely because of the padding)  */
  margin: 1rem auto auto 0.5rem;
  cursor: pointer;
  background: #fff;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 15px;
}

.tabs .tab {
  order: 99; /* Put the tabs last */
  flex-grow: 1;
  width: 100%;
  display: none;
  padding-top: 0.5rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}
.tabs input[type="radio"]:checked + label {
  background: #223fe0;
  color: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

table {
  border-collapse: collapse;
  border: 1px solid grey;
  table-layout: auto;
  width: auto;
}

caption {
  text-align: left;
  margin-top: 1rem;
}

th,
td {
  border: 1px solid grey;
  padding: 0.5rem 1rem;
}

tr:last-of-type {
  background-color: #f5f5f5;
}

.footer {
  bottom: 0;
  margin-left: var(--navbarWidth);
  width: calc(100% - var(--navbarWidth));
}

.pfcc {
  font-size: 1.4rem;
  background-color: #403f3e;
  color: white;
  padding: 10px 0 8px 0;
  text-align: center;
}

.pfcc > a {
  vertical-align: sub;
}

@media screen and (max-width: 836px) {
  #navbar {
    position: relative;
    width: 100%;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .articlename {
    margin-right: 0;
    margin-left: 1rem;
  }

  .nav-link {
    padding: 0.8rem;
    text-align: center;
  }

  #main-doc {
    margin-left: auto;
  }

  .main-section {
    margin: 0 5rem 0 5rem;
  }

  .stdStyle {
    overflow-x: auto;
  }

  .footer {
    margin: 0;
    width: 100%;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console