<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid.
</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>
@import "nib"

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5
  @media (max-width: 900px)  
    font-size: 20px
  @media (max-width: 500px)  
    font-size: 14px

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  line-height: 1.1

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js