<h4><span id="headings" class="heading">#</span>Headings</h4>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
<hr>
  <h4><span id="paragraphs" class="heading">#</span>Paragraphs & text styles</h4>
  <p>Fluitype is a typography css framework, which can easily be added to any webpage.The magic is behind the calculations done while incorporate the <code>vw</code> which stands for <code>viewport-width</code> and it is fully responsive and fluid to the size of the viewport.</p>
  <blockquote>This is a blockquote, you can use this guy to showcase how a quote as part of the typography can work. This is a component that has the purpose to show improtancy.</blockquote>
  <p>Just a simple paragraph text, that way you can easily visualize the <mark>behavior</mark> when you change the viewport, the rescaling and fluidity in action. This is a font type called Inter created for Figma, also used by Github.</p>
  <ul>
    <li><b>Bolded text</b></li>
    <li><i>Italic text</i></li>
    <li><strong>Strong text</strong></li>
    <li><u>Underlined text</u></li>
    <li><del>Deleted text</del></li>
  </ul>
  <hr>
  <h4><span id="lists" class="heading">#</span>List and List styles</h4>
  <h5>Unoredered List</h5>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
  </ul>
  <h5>Ordered List</h5>
  <ol>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li> List 4
      <ul>
        <li>List 4.1</li>
        <li>List 4.2</li>
        <li>List 4.3</li>
        <li>List 4.4</li>
        </ul>
    </li>
  </ol>
  <hr>
  <h4><span id="codesnippets" class="heading">#</span>Code snippets</h4>
  <h5>Code quote</h5>
  <code>font-size: calc(var(--fontSize) * 1.1);</code>
  <h5>Code preview</h5>
  <pre>pre {
    background-color: #f7f7f7;
    display: block;
    margin: 0 0 1.5625em;
    overflow: auto;
    padding: .8125em;
    tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: calc(var(--fontSize) * 1.1);
    letter-spacing: var(--letterSpacing);
    }
  </pre>
  <hr>
  <h4><span id="links" class="heading">#</span>Links and hyperlinks</h4>
  <a href="#">View in GitHub</a>
  <hr>
/* Set box-sizing globally to handle padding and border widths */
*,
*:after,
*:before {
  box-sizing: border-box;
}

/* Import of the Inter Font*/
@import url('https://rsms.me/inter/inter.css');
@supports (font-variation-settings: normal){

}
html { 
  font-family: "Inter", sans-serif;
}

/* Base*/
:root {
  --fontSize: calc(12px + 0.698vw); /* The character count on */  
  --lineHeight: calc(var(--fontSize) * 1.4);
  --letterSpacing: calc(var(--fontSize) * 0.0015);
  --fontWeight: 300;
}


p, li, b, i, strong, a, mark {
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  letter-spacing: var(--letterSpacing);
  font-feature-settings: normal;
  font-family: "Inter", sans-serif;
}

p, li , mark, a, blockquote {
    font-weight: calc(var(--fontWeight)* 1.33);
}

code {
  font-size: calc(var(--fontSize) * 1.1);
  line-height: var(--lineHeight);
  letter-spacing: var(--letterSpacing); 
  font-weight: calc(var(--fontWeight)* 1.33);
  color: #EB5757;
  font-family: "Inter", sans-serif;
}

mark {
  background: #B3D7FF; /* The color is the native browser highlight text color, to make the appeal of importance and focus on specific areas of the text.*/  
  padding: 0.05vw 0.4vw;
  border-radius: 2px;
  color: #545454;
  font-size: calc(var(--fontSize) * 1.1);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 1.33);
  word-break: break-word;
  font-family: "Inter", sans-serif;
}

blockquote {
  background-color: #f7f7f7;
  font-size: calc(var(--fontSize) * 1.1);
  letter-spacing: var(--letterSpacing);
  border-left: 4px solid #545454;
  border-radius: 2px;
  padding: 2.5vw;
  margin: 2%;
  font-style: italic;
  font-family: "Inter", sans-serif;
}

a {
  color: #545454;
  text-decoration-skip-ink: none;
  font-family: "Inter", sans-serif;
}

a:focus {
  outline: 1px dashed #0004b3;
}

a:hover {
  color: #0004b3;
}

pre {
    background-color: #282c35;
    color: #abb2bf;
    display: block;
    margin: 0 0 1.5625em;
    border-radius: 4px;
    overflow: auto;
    padding: 2.5vw;
    tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: calc(var(--fontSize) * 1.1);
    letter-spacing: var(--letterSpacing);
    font-family: "Inter", sans-serif;
}

h1{
  font-size: calc(var(--fontSize) * 3);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 2.66);
  font-family: "Inter", sans-serif;
}

h2 {
  font-size: calc(var(--fontSize) * 2);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 2.33);
  font-family: "Inter", sans-serif;
}

h3 {
  font-size: calc(var(--fontSize) * 1.750);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 2);
  font-family: "Inter", sans-serif;
}

h4 {
  font-size: calc(var(--fontSize) * 1.5);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 1.667);
  font-family: "Inter", sans-serif;
}

h5 {
  font-size: calc(var(--fontSize) * 1.25);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 1.5);
  font-family: "Inter", sans-serif;
}

h6{
  font-size: calc(var(--fontSize) * 1);
  letter-spacing: var(--letterSpacing);
  font-weight: calc(var(--fontWeight)* 1);
  font-family: "Inter", sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.