diff --git a/.gitignore b/.gitignore
index 7a4438e..d11cfed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 _site
 *.lock
+.jekyll-cache
diff --git a/dist/chota.css b/dist/chota.css
index 2bc9870..9393c3b 100644
--- a/dist/chota.css
+++ b/dist/chota.css
@@ -129,6 +129,7 @@ kbd {
   border-radius: 4px;
   padding: 0.2em 0.4em;
   background-color: var(--bg-secondary-color);
+  color: var(--color-error);
 }
 pre {
   background-color: var(--bg-secondary-color);
@@ -731,11 +732,11 @@ button:disabled:hover {
     margin: auto 1rem;
 }
 .card {
-    padding: 1rem 2rem;
-    border-radius: 4px;
-    background: var(--bg-color);
-    -webkit-box-shadow: 0 1px 3px var(--color-grey);
-            box-shadow: 0 1px 3px var(--color-grey);
+  padding: 1rem 2rem;
+  border-radius: 4px;
+  background: var(--bg-color);
+  -webkit-box-shadow: 0 1px 3px var(--color-grey);
+          box-shadow: 0 1px 3px var(--color-grey);
 }
 .card p:last-child {
   margin: 0;
diff --git a/docs/doc-styles.css b/docs/doc-styles.css
index 27d21e8..141c293 100644
--- a/docs/doc-styles.css
+++ b/docs/doc-styles.css
@@ -1,152 +1,303 @@
 body.dark {
-    --bg-color: #000;
-    --bg-secondary-color: #131316;
-    --font-color: #f5f5f5;
-    --color-grey: #ccc;
-    --color-darkGrey: #777;
+  --bg-color: #000;
+  --bg-secondary-color: #262626;
+  --font-color: #f5f5f5;
+  --color-grey: #bbb;
+  --color-darkGrey: #888;
+  --color-primary: #17c16f;
+  --color-error: #ea4f4f;
 }
 
-body>.container {
-    max-width: 720px;
+body > .container {
+  max-width: 720px;
 }
 
 .hero {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .logo {
-    flex: 1;
-    flex-direction: column;
+  flex: 1;
+  flex-direction: column;
 }
 
 .logo svg {
-    width: 100%;
-    max-width: 300px;
+  width: 100%;
+  max-width: 300px;
 }
 
 .logo h3 {
-    font-weight: 300;
+  font-weight: 300;
 }
 
-body>footer {
-    background-color: #fafafa;
-    padding: 4rem;
+body > footer {
+  background-color: #fafafa;
+  padding: 4rem;
 }
 
-body.dark>footer {
-    background-color: #1a1a1a;
+body.dark > footer {
+  background-color: #262626;
 }
 
 section {
-    margin: 5rem auto;
+  margin: 5rem auto;
 }
 
 #features ul {
-    list-style-type: none;
-    padding: 0;
-    font-size: 1.2em;
-    font-weight: 200;
+  list-style-type: none;
+  padding: 0;
+  font-size: 1.2em;
+  font-weight: 200;
 }
 
 figure.highlight {
-    margin-left: 0;
-    margin-right: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 hr {
-    margin: 3rem 0;
+  margin: 3rem 0;
 }
 
 #grid .card {
-    padding: 1rem 0rem;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    background-color: rgba(26, 159, 96, 0.2);
-    font-size: 1.2rem;
+  padding: 1rem 0rem;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background-color: rgba(26, 159, 96, 0.2);
+  font-size: 1.2rem;
+}
+
+body.dark #grid .card {
+    background-color: rgba(26, 159, 96, 0.4);
+}
+
+body.dark .card {
+    box-shadow: 0 1px 3px var(--color-darkGrey);
 }
 
 .buttons {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .buttons > * {
-    margin: .5rem;
+  margin: 0.5rem;
 }
 
 .buttons > .button + .button {
-    margin-left: .5rem;
+  margin-left: 0.5rem;
 }
 
-.highlight, code { background-color: var(--bg-secondary-color); }
-.highlight .c { color: #93a1a1 } /* Comment */
-.highlight .err { color: #586e75 } /* Error */
-.highlight .g { color: #586e75 } /* Generic */
-.highlight .k { color: #859900 } /* Keyword */
-.highlight .l { color: #586e75 } /* Literal */
-.highlight .n { color: #586e75 } /* Name */
-.highlight .o { color: #859900 } /* Operator */
-.highlight .x { color: #cb4b16 } /* Other */
-.highlight .p { color: #586e75 } /* Punctuation */
-.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
-.highlight .cp { color: #859900 } /* Comment.Preproc */
-.highlight .c1 { color: #93a1a1 } /* Comment.Single */
-.highlight .cs { color: #859900 } /* Comment.Special */
-.highlight .gd { color: #2aa198 } /* Generic.Deleted */
-.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #dc322f } /* Generic.Error */
-.highlight .gh { color: #cb4b16 } /* Generic.Heading */
-.highlight .gi { color: #859900 } /* Generic.Inserted */
-.highlight .go { color: #586e75 } /* Generic.Output */
-.highlight .gp { color: #586e75 } /* Generic.Prompt */
-.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
-.highlight .gt { color: #586e75 } /* Generic.Traceback */
-.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
-.highlight .kd { color: #22b3eb } /* Keyword.Declaration */
-.highlight .kn { color: #859900 } /* Keyword.Namespace */
-.highlight .kp { color: #859900 } /* Keyword.Pseudo */
-.highlight .kr { color: #22b3eb } /* Keyword.Reserved */
-.highlight .kt { color: #dc322f } /* Keyword.Type */
-.highlight .ld { color: #586e75 } /* Literal.Date */
-.highlight .m { color: #2aa198 } /* Literal.Number */
-.highlight .s { color: #2aa198 } /* Literal.String */
-.highlight .na { color: #586e75 } /* Name.Attribute */
-.highlight .nb { color: #B58900 } /* Name.Builtin */
-.highlight .nc { color: #22b3eb } /* Name.Class */
-.highlight .no { color: #cb4b16 } /* Name.Constant */
-.highlight .nd { color: #22b3eb } /* Name.Decorator */
-.highlight .ni { color: #cb4b16 } /* Name.Entity */
-.highlight .ne { color: #cb4b16 } /* Name.Exception */
-.highlight .nf { color: #22b3eb } /* Name.Function */
-.highlight .nl { color: #586e75 } /* Name.Label */
-.highlight .nn { color: #586e75 } /* Name.Namespace */
-.highlight .nx { color: #586e75 } /* Name.Other */
-.highlight .py { color: #586e75 } /* Name.Property */
-.highlight .nt { color: #22b3eb } /* Name.Tag */
-.highlight .nv { color: #22b3eb } /* Name.Variable */
-.highlight .ow { color: #859900 } /* Operator.Word */
-.highlight .w { color: #586e75 } /* Text.Whitespace */
-.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
-.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
-.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
-.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
-.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */
-.highlight .sc { color: #2aa198 } /* Literal.String.Char */
-.highlight .sd { color: #586e75 } /* Literal.String.Doc */
-.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
-.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
-.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */
-.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
-.highlight .sx { color: #2aa198 } /* Literal.String.Other */
-.highlight .sr { color: #dc322f } /* Literal.String.Regex */
-.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
-.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
-.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #22b3eb } /* Name.Variable.Class */
-.highlight .vg { color: #22b3eb } /* Name.Variable.Global */
-.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */
-.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+.highlight,
+code {
+  background-color: var(--bg-secondary-color);
+}
+.highlight .c {
+  color: #93a1a1;
+} /* Comment */
+.highlight .err {
+  color: #586e75;
+} /* Error */
+.highlight .g {
+  color: #586e75;
+} /* Generic */
+.highlight .k {
+  color: #859900;
+} /* Keyword */
+.highlight .l {
+  color: #586e75;
+} /* Literal */
+.highlight .n {
+  color: #586e75;
+} /* Name */
+.highlight .o {
+  color: #859900;
+} /* Operator */
+.highlight .x {
+  color: #cb4b16;
+} /* Other */
+.highlight .p {
+  color: #586e75;
+} /* Punctuation */
+.highlight .cm {
+  color: #93a1a1;
+} /* Comment.Multiline */
+.highlight .cp {
+  color: #859900;
+} /* Comment.Preproc */
+.highlight .c1 {
+  color: #93a1a1;
+} /* Comment.Single */
+.highlight .cs {
+  color: #859900;
+} /* Comment.Special */
+.highlight .gd {
+  color: #2aa198;
+} /* Generic.Deleted */
+.highlight .ge {
+  color: #586e75;
+  font-style: italic;
+} /* Generic.Emph */
+.highlight .gr {
+  color: #dc322f;
+} /* Generic.Error */
+.highlight .gh {
+  color: #cb4b16;
+} /* Generic.Heading */
+.highlight .gi {
+  color: #859900;
+} /* Generic.Inserted */
+.highlight .go {
+  color: #586e75;
+} /* Generic.Output */
+.highlight .gp {
+  color: #586e75;
+} /* Generic.Prompt */
+.highlight .gs {
+  color: #586e75;
+  font-weight: bold;
+} /* Generic.Strong */
+.highlight .gu {
+  color: #cb4b16;
+} /* Generic.Subheading */
+.highlight .gt {
+  color: #586e75;
+} /* Generic.Traceback */
+.highlight .kc {
+  color: #cb4b16;
+} /* Keyword.Constant */
+.highlight .kd {
+  color: #22b3eb;
+} /* Keyword.Declaration */
+.highlight .kn {
+  color: #859900;
+} /* Keyword.Namespace */
+.highlight .kp {
+  color: #859900;
+} /* Keyword.Pseudo */
+.highlight .kr {
+  color: #22b3eb;
+} /* Keyword.Reserved */
+.highlight .kt {
+  color: #dc322f;
+} /* Keyword.Type */
+.highlight .ld {
+  color: #586e75;
+} /* Literal.Date */
+.highlight .m {
+  color: #2aa198;
+} /* Literal.Number */
+.highlight .s {
+  color: #2aa198;
+} /* Literal.String */
+.highlight .na {
+  color: #586e75;
+} /* Name.Attribute */
+.highlight .nb {
+  color: #b58900;
+} /* Name.Builtin */
+.highlight .nc {
+  color: #22b3eb;
+} /* Name.Class */
+.highlight .no {
+  color: #cb4b16;
+} /* Name.Constant */
+.highlight .nd {
+  color: #22b3eb;
+} /* Name.Decorator */
+.highlight .ni {
+  color: #cb4b16;
+} /* Name.Entity */
+.highlight .ne {
+  color: #cb4b16;
+} /* Name.Exception */
+.highlight .nf {
+  color: #22b3eb;
+} /* Name.Function */
+.highlight .nl {
+  color: #586e75;
+} /* Name.Label */
+.highlight .nn {
+  color: #586e75;
+} /* Name.Namespace */
+.highlight .nx {
+  color: #586e75;
+} /* Name.Other */
+.highlight .py {
+  color: #586e75;
+} /* Name.Property */
+.highlight .nt {
+  color: #22b3eb;
+} /* Name.Tag */
+.highlight .nv {
+  color: #22b3eb;
+} /* Name.Variable */
+.highlight .ow {
+  color: #859900;
+} /* Operator.Word */
+.highlight .w {
+  color: #586e75;
+} /* Text.Whitespace */
+.highlight .mf {
+  color: #2aa198;
+} /* Literal.Number.Float */
+.highlight .mh {
+  color: #2aa198;
+} /* Literal.Number.Hex */
+.highlight .mi {
+  color: #2aa198;
+} /* Literal.Number.Integer */
+.highlight .mo {
+  color: #2aa198;
+} /* Literal.Number.Oct */
+.highlight .sb {
+  color: #93a1a1;
+} /* Literal.String.Backtick */
+.highlight .sc {
+  color: #2aa198;
+} /* Literal.String.Char */
+.highlight .sd {
+  color: #586e75;
+} /* Literal.String.Doc */
+.highlight .s2 {
+  color: #2aa198;
+} /* Literal.String.Double */
+.highlight .se {
+  color: #cb4b16;
+} /* Literal.String.Escape */
+.highlight .sh {
+  color: #586e75;
+} /* Literal.String.Heredoc */
+.highlight .si {
+  color: #2aa198;
+} /* Literal.String.Interpol */
+.highlight .sx {
+  color: #2aa198;
+} /* Literal.String.Other */
+.highlight .sr {
+  color: #dc322f;
+} /* Literal.String.Regex */
+.highlight .s1 {
+  color: #2aa198;
+} /* Literal.String.Single */
+.highlight .ss {
+  color: #2aa198;
+} /* Literal.String.Symbol */
+.highlight .bp {
+  color: #22b3eb;
+} /* Name.Builtin.Pseudo */
+.highlight .vc {
+  color: #22b3eb;
+} /* Name.Variable.Class */
+.highlight .vg {
+  color: #22b3eb;
+} /* Name.Variable.Global */
+.highlight .vi {
+  color: #22b3eb;
+} /* Name.Variable.Instance */
+.highlight .il {
+  color: #2aa198;
+} /* Literal.Number.Integer.Long */
diff --git a/docs/index.html b/docs/index.html
index 3a41cd9..bed341b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,9 +8,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <title>chota - A micro CSS framework</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://unpkg.com/chota">
+  <!-- <link rel="stylesheet" href="https://unpkg.com/chota"> -->
   <!-- for dev -->
-  <!-- <link rel="stylesheet" href="./dist/chota.css"> -->
+  <link rel="stylesheet" href="http://localhost:5000/dist/chota.css">
   <link rel="stylesheet" href="./doc-styles.css">
   <link rel="icon" type="image/png" href="favicon.png" />
 </head>
@@ -28,7 +28,7 @@
         <a href="#start">start</a>
         <a href="#docs">docs</a>
         <a href="https://github.com/jenil/chota">GitHub</a>
-        <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
+        <a href="javascript:void(0)" id="theme-switch" onclick="switchMode(this)">☀️</a>
       </nav>
     </div>
 
@@ -113,7 +113,7 @@
 /* Other styles..... */
 {% endhighlight %}
 <br>
-<p>Addtionally, you can add dark mode to you site, to support devices that prefer dark mode.</p>
+<p>Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.</p>
 {% highlight html %}
   <style>
     body.dark {
@@ -176,7 +176,22 @@
     <p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
     <h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
   </footer>
-  <script src="./main.js"></script>
+  <script>
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      document.body.classList.add("dark");
+      document.querySelector('#theme-switch').innerHTML = "🌙"
+    }
+
+    function switchMode(el) {
+      const bodyClass = document.body.classList;
+      bodyClass.contains("dark")
+        ? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
+        : ((el.innerHTML = "🌙"), bodyClass.add("dark"));
+    }
+  </script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/src/_base.css b/src/_base.css
index 3c0f759..50da39c 100644
--- a/src/_base.css
+++ b/src/_base.css
@@ -150,6 +150,7 @@ kbd {
   border-radius: 4px;
   padding: 0.2em 0.4em;
   background-color: var(--bg-secondary-color);
+  color: var(--color-error);
 }
 
 pre {
diff --git a/src/_card.css b/src/_card.css
index d989dd2..052a546 100644
--- a/src/_card.css
+++ b/src/_card.css
@@ -1,8 +1,8 @@
 .card {
-    padding: 1rem 2rem;
-    border-radius: 4px;
-    background: var(--bg-color);
-    box-shadow: 0 1px 3px var(--color-grey);
+  padding: 1rem 2rem;
+  border-radius: 4px;
+  background: var(--bg-color);
+  box-shadow: 0 1px 3px var(--color-grey);
 }
 
 .card p:last-child {
diff --git a/test/components.html b/test/components.html
index 8dd6773..333584c 100644
--- a/test/components.html
+++ b/test/components.html
@@ -1,432 +1,452 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Components</title>
+    <link rel="stylesheet" href="../dist/chota.css" />
+    <style>
+      .nav {
+        border: 1px solid red;
+      }
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Components</title>
-  <link rel="stylesheet" href="../dist/chota.css">
-  <style>
-    .nav {
-      border: 1px solid red;
-    }    
-    
-    body.dark {
-      --bg-color: #000;
-      --bg-secondary-color: #131316;
-      --font-color: #f5f5f5;
-      --color-grey: #ccc;
-      --color-darkGrey: #777;
-    }
-  </style>
-</head>
+      body.dark {
+        --bg-color: #000;
+        --bg-secondary-color: #131316;
+        --font-color: #f5f5f5;
+        --color-grey: #ccc;
+        --color-darkGrey: #777;
+      }
+    </style>
+  </head>
 
-<body>
-  <div class="container">
-    <h1 class="pull-right" style="margin: 0;">
-      <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
-    </h1>
-    <h1>Nav</h1>
-  </div>
-  <div class="clearfix" ></div>
-  <nav class="nav">
+  <body>
     <div class="container">
+      <h1 class="pull-right" style="margin: 0;">
+        <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
+      </h1>
+      <h1>Nav</h1>
+    </div>
+    <div class="clearfix"></div>
+    <nav class="nav">
+      <div class="container">
+        <div class="nav-left">
+          <a class="brand" href="#">Logo</a>
+        </div>
+        <div class="nav-center">
+          <a class="button outline" href="#">Centered</a>
+        </div>
+        <div class="nav-right">
+          <a href="#!1.html">Link 1</a>
+          <a href="#!2.html">Link 2</a>
+          <a href="#!3.html" class="active">Link 3</a>
+        </div>
+      </div>
+    </nav>
+    <br />
+    <hr />
+    <br />
+    <nav class="nav">
       <div class="nav-left">
         <a class="brand" href="#">Logo</a>
       </div>
       <div class="nav-center">
-        <a class="button outline" href="#">Centered</a>
+        <a href="#">Centered</a>
       </div>
       <div class="nav-right">
         <a href="#!1.html">Link 1</a>
         <a href="#!2.html">Link 2</a>
-        <a href="#!3.html" class="active">Link 3</a>
+        <a href="#!3.html">Link 3</a>
       </div>
-    </div>
-  </nav>
-  <br>
-  <hr>
-  <br>
-  <nav class="nav">
-    <div class="nav-left">
-      <a class="brand" href="#">Logo</a>
-    </div>
-    <div class="nav-center">
-      <a href="#">Centered</a>
-    </div>
-    <div class="nav-right">
-      <a href="#!1.html">Link 1</a>
-      <a href="#!2.html">Link 2</a>
-      <a href="#!3.html">Link 3</a>
-    </div>
-  </nav>
-  <div class="container">
-    <section>
-      <br>
-      <hr>
-      <br>
-      <nav class="nav">
-        <div class="nav-center">
-          <a href="#!1.html">Link 1</a>
-          <a href="#!2.html">Link 2</a>
-          <a href="#!3.html" class="active">Link 3</a>
-          <a href="#!" class="button primary">Button</a>
-        </div>
-      </nav>
-      <br>
-      <hr>
-      <br>
-      <nav class="nav">
-        <div class="nav-left">
-          <a class="brand" href="#">
-            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
-            Brand</a>
-        </div>
-        <div class="nav-right">
-          <div class="tabs">
+    </nav>
+    <div class="container">
+      <section>
+        <br />
+        <hr />
+        <br />
+        <nav class="nav">
+          <div class="nav-center">
             <a href="#!1.html">Link 1</a>
             <a href="#!2.html">Link 2</a>
             <a href="#!3.html" class="active">Link 3</a>
+            <a href="#!" class="button primary">Button</a>
+          </div>
+        </nav>
+        <br />
+        <hr />
+        <br />
+        <nav class="nav">
+          <div class="nav-left">
+            <a class="brand" href="#">
+              <img
+                src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+                alt=""
+              />
+              Brand</a
+            >
+          </div>
+          <div class="nav-right">
+            <div class="tabs">
+              <a href="#!1.html">Link 1</a>
+              <a href="#!2.html">Link 2</a>
+              <a href="#!3.html" class="active">Link 3</a>
+            </div>
+          </div>
+        </nav>
+        <br />
+        <hr />
+        <br />
+        <nav class="nav">
+          <div class="nav-left">
+            <a class="brand" href="#">
+              <img
+                src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+                alt=""
+              />
+            </a>
+            <div class="tabs">
+              <a href="#!1.html">Link 1</a>
+              <a href="#!2.html">Link 2</a>
+              <a href="#!3.html">Link 3</a>
+            </div>
+          </div>
+        </nav>
+        <br />
+        <hr />
+        <br />
+      </section>
+      <section>
+        <h1>Tabs</h1>
+        <div class="tabs">
+          <a class="active" href="#!1.html">Tab 1</a>
+          <a href="#!2.html">Tab 2</a>
+          <a href="#!3.html">Tab 3</a>
+        </div>
+        <br />
+        <hr />
+        <br />
+        <div class="tabs is-full">
+          <a class="active" href="#!1.html">Tab 1</a>
+          <a href="#!2.html">Tab 2</a>
+          <a href="#!3.html">Tab 3</a>
+        </div>
+      </section>
+      <section>
+        <h1>Card</h1>
+        <div class="row is-center">
+          <div class="col-4">
+            <div class="card">
+              <header>
+                <h4>Card title</h4>
+              </header>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercit.
+              </p>
+              <footer class="is-right">
+                <a href="#!" class="button primary">Submit</a>
+                <a href="#!" class="button">Cancel</a>
+              </footer>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="card">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercit.
+              </p>
+              <p>
+                Ipsa magnam consequatur itaque, mollitia non quam voluptate
+                consequuntur dignissimos recusandae ea quas, nobis, debitis
+                officia iure minus et dolore, reprehenderit sapiente iste.
+                Eligendi eveniet ut qui at, deleniti enim!
+              </p>
+            </div>
           </div>
         </div>
-      </nav>
-      <br>
-      <hr>
-      <br>
-      <nav class="nav">
-        <div class="nav-left">
-          <a class="brand" href="#">
-            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
-          </a>
-          <div class="tabs">
-            <a href="#!1.html">Link 1</a>
-            <a href="#!2.html">Link 2</a>
-            <a href="#!3.html">Link 3</a>
+      </section>
+      <section>
+        <h1>Tag</h1>
+        <p>
+          <span class="tag">One</span>
+          <span class="tag">Two</span>
+          <span class="tag">Three</span>
+          <span class="tag is-small">Small</span>
+          <span class="tag is-large">Large</span>
+        </p>
+      </section>
+      <section>
+        <h1>Grid</h1>
+        <div class="row">
+          <div class="col">
+            <div class="card is-center">.col</div>
           </div>
         </div>
-      </nav>
-      <br>
-      <hr>
-      <br>
-    </section>
-    <section>
-      <h1>Tabs</h1>
-      <div class="tabs">
-        <a class="active" href="#!1.html">Tab 1</a>
-        <a href="#!2.html">Tab 2</a>
-        <a href="#!3.html">Tab 3</a>
-      </div>
-      <br>
-      <hr>
-      <br>
-      <div class="tabs is-full">
-        <a class="active" href="#!1.html">Tab 1</a>
-        <a href="#!2.html">Tab 2</a>
-        <a href="#!3.html">Tab 3</a>
-      </div>
-    </section>
-    <section>
-      <h1>Card</h1>
-      <div class="row is-center">
-        <div class="col-4">
-          <div class="card">
-            <header>
-              <h4>Card title</h4>
-            </header>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore
-              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-            <footer class="is-right">
-              <a href="#!" class="button primary">Submit</a>
-              <a href="#!" class="button">Cancel</a>
-            </footer>
+        <div class="row">
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
           </div>
         </div>
-        <div class="col-6">
-          <div class="card">
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore
-              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-            <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas,
-              nobis,
-              debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti
-              enim!</p>
+        <div class="row">
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
           </div>
         </div>
-      </div>
-    </section>
-    <section>
-      <h1>Tag</h1>
-      <p>
-        <span class="tag">One</span>
-        <span class="tag">Two</span>
-        <span class="tag">Three</span>
-        <span class="tag is-small">Small</span>
-        <span class="tag is-large">Large</span>
-      </p>
-    </section>
-    <section>
-      <h1>Grid</h1>
-      <div class="row">
-        <div class="col">
-          <div class="card is-center">.col</div>
+        <div class="row">
+          <div class="col-2">
+            <div class="card is-center">.col-2</div>
+          </div>
+          <div class="col-2">
+            <div class="card is-center">.col-2</div>
+          </div>
+          <div class="col-2">
+            <div class="card is-center">.col-2</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <div class="card is-center">.col</div>
+        <div class="row">
+          <div class="col-3">
+            <div class="card is-center">.col-3</div>
+          </div>
+          <div class="col-3">
+            <div class="card is-center">.col-3</div>
+          </div>
+          <div class="col-3">
+            <div class="card is-center">.col-3</div>
+          </div>
+          <div class="col-3">
+            <div class="card is-center">.col-3</div>
+          </div>
         </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
+        <div class="row">
+          <div class="col-4">
+            <div class="card is-center">.col-4</div>
+          </div>
+          <div class="col-4">
+            <div class="card is-center">.col-4</div>
+          </div>
+          <div class="col-4">
+            <div class="card is-center">.col-4</div>
+          </div>
         </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
+        <div class="row">
+          <div class="col-5">
+            <div class="card is-center">.col-5</div>
+          </div>
+          <div class="col-5">
+            <div class="card is-center">.col-5</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-6">
+            <div class="card is-center">.col-6</div>
+          </div>
+          <div class="col-6">
+            <div class="card is-center">.col-6</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-7">
+            <div class="card is-center">.col-7</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-8">
+            <div class="card is-center">.col-8</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-9">
+            <div class="card is-center">.col-9</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
+          <div class="col-1">
+            <div class="card is-center">.col-1</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-10">
+            <div class="card is-center">.col-10</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-11">
+            <div class="card is-center">.col-11</div>
+          </div>
+          <div class="col">
+            <div class="card is-center">.col</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col-12">
+            <div class="card is-center">.col-12</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <h4>Responsive grids:</h4>
+        <div class="row">
+          <div class="col-12 col-6-md col-4-lg">
+            <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
+          </div>
+          <div class="col-6 col-3-md col-4-lg">
+            <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+          </div>
+          <div class="col-6 col-3-md col-4-lg">
+            <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col col-6-lg">
+            <div class="card is-center">.col.col-6-lg</div>
+          </div>
+          <div class="col col-3-lg">
+            <div class="card is-center">.col.col-3-lg</div>
+          </div>
+          <div class="col col-3-lg">
+            <div class="card is-center">.col.col-3-lg</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+        <div class="row">
+          <div class="col hide-sm">
+            <div class="card is-center">.hide-sm</div>
+          </div>
+          <div class="col hide-md">
+            <div class="card is-center">.hide-md</div>
+          </div>
+          <div class="col hide-lg">
+            <div class="card is-center">.hide-lg</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
+      </section>
+      <section>
+        <h1>Helpers</h1>
+        <h4>Text color</h4>
+        <p class="text-primary">Primary</p>
+        <p class="text-light">Light</p>
+        <p class="text-grey">Grey</p>
+        <p class="text-dark">Dark</p>
+        <p class="text-error">Error</p>
+        <p class="text-success">Success</p>
+        <h4>Background color</h4>
+        <div class="row">
+          <div class="col">
+            <div class="card bg-primary">.bg-primary</div>
+          </div>
+          <div class="col">
+            <div class="card bg-light">.bg-light</div>
+          </div>
+          <div class="col">
+            <div class="card bg-grey">.bg-grey</div>
+          </div>
+          <div class="col">
+            <div class="card bg-dark">.bg-dark</div>
+          </div>
+          <div class="col">
+            <div class="card bg-success">.bg-success</div>
+          </div>
+          <div class="col">
+            <div class="card bg-error">.bg-error</div>
+          </div>
         </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-2">
-          <div class="card is-center">.col-2</div>
-        </div>
-        <div class="col-2">
-          <div class="card is-center">.col-2</div>
-        </div>
-        <div class="col-2">
-          <div class="card is-center">.col-2</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-3">
-          <div class="card is-center">.col-3</div>
-        </div>
-        <div class="col-3">
-          <div class="card is-center">.col-3</div>
-        </div>
-        <div class="col-3">
-          <div class="card is-center">.col-3</div>
-        </div>
-        <div class="col-3">
-          <div class="card is-center">.col-3</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-4">
-          <div class="card is-center">.col-4</div>
-        </div>
-        <div class="col-4">
-          <div class="card is-center">.col-4</div>
-        </div>
-        <div class="col-4">
-          <div class="card is-center">.col-4</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-5">
-          <div class="card is-center">.col-5</div>
-        </div>
-        <div class="col-5">
-          <div class="card is-center">.col-5</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-6">
-          <div class="card is-center">.col-6</div>
-        </div>
-        <div class="col-6">
-          <div class="card is-center">.col-6</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-7">
-          <div class="card is-center">.col-7</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-8">
-          <div class="card is-center">.col-8</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-9">
-          <div class="card is-center">.col-9</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-        <div class="col-1">
-          <div class="card is-center">.col-1</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-10">
-          <div class="card is-center">.col-10</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-11">
-          <div class="card is-center">.col-11</div>
-        </div>
-        <div class="col">
-          <div class="card is-center">.col</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-12">
-          <div class="card is-center">.col-12</div>
-        </div>
-      </div>
-      <h4>Responsive grids:</h4>
-      <div class="row">
-        <div class="col-12 col-6-md col-4-lg">
-          <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
-        </div>
-        <div class="col-6 col-3-md col-4-lg">
-          <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
-        </div>
-        <div class="col-6 col-3-md col-4-lg">
-          <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col col-6-lg">
-          <div class="card is-center">.col.col-6-lg</div>
-        </div>
-        <div class="col col-3-lg">
-          <div class="card is-center">.col.col-3-lg</div>
-        </div>
-        <div class="col col-3-lg">
-          <div class="card is-center">.col.col-3-lg</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col hide-sm">
-          <div class="card is-center">.hide-sm</div>
-        </div>
-        <div class="col hide-md">
-          <div class="card is-center">.hide-md</div>
-        </div>
-        <div class="col hide-lg">
-          <div class="card is-center">.hide-lg</div>
-        </div>
-      </div>
-    </section>
-    <section>
-      <h1>Helpers</h1>
-      <h4>Text color</h4>
-      <p class="text-primary">Primary</p>
-      <p class="text-light">Light</p>
-      <p class="text-grey">Grey</p>
-      <p class="text-dark">Dark</p>
-      <p class="text-error">Error</p>
-      <p class="text-success">Success</p>
-      <h4>Background color</h4>
-      <div class="row">
-        <div class="col">
-          <div class="card bg-primary">.bg-primary</div>
-        </div>
-        <div class="col">
-          <div class="card bg-light">.bg-light</div>
-        </div>
-        <div class="col">
-          <div class="card bg-grey">.bg-grey</div>
-        </div>
-        <div class="col">
-          <div class="card bg-dark">.bg-dark</div>
-        </div>
-        <div class="col">
-          <div class="card bg-success">.bg-success</div>
-        </div>
-        <div class="col">
-          <div class="card bg-error">.bg-error</div>
-        </div>
-      </div>
-      <h4>Responsive Helpers</h4>
-      <div class="hide-xs">.hide-xs</div>
-      <div class="hide-sm">.hide-sm</div>
-      <div class="hide-md">.hide-md</div>
-      <div class="hide-lg">.hide-lg</div>
-    </section>
-    <section>
-      <h1>Icons</h1>
-      <button type="button" class="button primary icon">New file
-        <img src="https://icongr.am/feather/file.svg?size=16&color=ffffff" alt="icon">
-      </button>
-      <button type="button" class="button icon">New file
-        <img src="https://icongr.am/feather/file.svg?size=12" alt="icon">
-      </button>
-      <button type="button" class="button dark icon">New file
-        <img src="https://icongr.am/feather/file.svg?size=32&color=ffffff" alt="icon">
-      </button>
-      <button class="button icon-only">
-        <img src="https://icongr.am/feather/search.svg?size=16">
-      </button>
-      <button class="button icon-only">
-        <img src="https://icongr.am/feather/search.svg">
-      </button>
-    </section>
-  </div>
-  <p>
-    <br>
-  </p>
-  <script src="../docs/main.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <h4>Responsive Helpers</h4>
+        <div class="hide-xs">.hide-xs</div>
+        <div class="hide-sm">.hide-sm</div>
+        <div class="hide-md">.hide-md</div>
+        <div class="hide-lg">.hide-lg</div>
+      </section>
+      <section>
+        <h1>Icons</h1>
+        <button type="button" class="button primary icon">
+          New file
+          <img
+            src="https://icongr.am/feather/file.svg?size=16&color=ffffff"
+            alt="icon"
+          />
+        </button>
+        <button type="button" class="button icon">
+          New file
+          <img src="https://icongr.am/feather/file.svg?size=12" alt="icon" />
+        </button>
+        <button type="button" class="button dark icon">
+          New file
+          <img
+            src="https://icongr.am/feather/file.svg?size=32&color=ffffff"
+            alt="icon"
+          />
+        </button>
+        <button class="button icon-only">
+          <img src="https://icongr.am/feather/search.svg?size=16" />
+        </button>
+        <button class="button icon-only">
+          <img src="https://icongr.am/feather/search.svg" />
+        </button>
+      </section>
+    </div>
+    <p>
+      <br />
+    </p>
+    <script src="../docs/main.js"></script>
+  </body>
+</html>
diff --git a/test/index.html b/test/index.html
index 636ffdd..89967af 100644
--- a/test/index.html
+++ b/test/index.html
@@ -1,550 +1,761 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Elements</title>
+    <link rel="stylesheet" href="../dist/chota.css" />
+    <style>
+      body.dark {
+        --bg-color: #000;
+        --bg-secondary-color: #131316;
+        --font-color: #f5f5f5;
+        --color-grey: #ccc;
+        --color-darkGrey: #777;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Elements</title>
-  <link rel="stylesheet" href="../dist/chota.css">
-  <style>
-    body.dark {
-      --bg-color: #000;
-      --bg-secondary-color: #131316;
-      --font-color: #f5f5f5;
-      --color-grey: #ccc;
-      --color-darkGrey: #777;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="top" class="container" role="document">
-    <header role="banner">
-      <h1 class="pull-right" style="margin: 0;">
-        <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
-      </h1>
-      <h1>Chota CSS</h1>
-      <div class="clearfix"></div>
-      <p>A small CSS framework.</p>
-    </header>
-    <nav role="navigation">
-      <ul>
-        <li>
-          <a href="#text">Text</a>
-          <ul>
-            <li><a href="#text__headings">Headings</a></li>
-            <li><a href="#text__paragraphs">Paragraphs</a></li>
-            <li><a href="#text__blockquotes">Blockquotes</a></li>
-            <li><a href="#text__lists">Lists</a></li>
-            <li><a href="#text__hr">Horizontal rules</a></li>
-            <li><a href="#text__tables">Tabular data</a></li>
-            <li><a href="#text__code">Code</a></li>
-            <li><a href="#text__inline">Inline elements</a></li>
-          </ul>
-        </li>
-        <li>
-          <a href="#embedded">Embedded content</a>
-          <ul>
-            <li><a href="#embedded__images">Images</a></li>
-            <li><a href="#embedded__audio">Audio</a></li>
-            <li><a href="#embedded__video">Video</a></li>
-            <li><a href="#embedded__canvas">Canvas</a></li>
-            <li><a href="#embedded__meter">Meter</a></li>
-            <li><a href="#embedded__progress">Progress</a></li>
-            <li><a href="#embedded__svg">Inline SVG</a></li>
-            <li><a href="#embedded__iframe">IFrames</a></li>
-          </ul>
-        </li>
-        <li>
-          <a href="#forms">Form elements</a>
-          <ul>
-            <li><a href="#forms__input">Input fields</a></li>
-            <li><a href="#forms__select">Select menus</a></li>
-            <li><a href="#forms__checkbox">Checkboxes</a></li>
-            <li><a href="#forms__radio">Radio buttons</a></li>
-            <li><a href="#forms__textareas">Textareas</a></li>
-            <li><a href="#forms__html5">HTML5 inputs</a></li>
-            <li><a href="#forms__action">Action buttons</a></li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
-    <main role="main">
-      <section id="text">
-        <header>
-          <h1>Text</h1></header>
-        <article id="text__headings">
-          <header>
-            <h1>Headings</h1>
-          </header>
-          <div>
-            <h1>Heading 1</h1>
-            <h2>Heading 2</h2>
-            <h3>Heading 3</h3>
-            <h4>Heading 4</h4>
-            <h5>Heading 5</h5>
-            <h6>Heading 6</h6>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__paragraphs">
-          <header>
-            <h1>Paragraphs</h1></header>
-          <div>
-            <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required
-              by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__blockquotes">
-          <header>
-            <h1>Blockquotes</h1></header>
-          <div>
-            <blockquote>
-              <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
-              <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
-              <cite><a href="#!">Said no one, ever.</a></cite>
-            </blockquote>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__lists">
-          <header>
-            <h1>Lists</h1></header>
-          <div>
-            <h3>Definition list</h3>
-            <dl>
-              <dt>Definition List Title</dt>
-              <dd>This is a definition list division.</dd>
-            </dl>
-            <h3>Ordered List</h3>
-            <ol>
-              <li>List Item 1</li>
-              <li>List Item 2</li>
-              <li>List Item 3</li>
-            </ol>
-            <h3>Unordered List</h3>
+  <body>
+    <div id="top" class="container" role="document">
+      <header role="banner">
+        <h1 class="pull-right" style="margin: 0;">
+          <a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
+        </h1>
+        <h1>Chota CSS</h1>
+        <div class="clearfix"></div>
+        <p>A small CSS framework.</p>
+      </header>
+      <nav role="navigation">
+        <ul>
+          <li>
+            <a href="#text">Text</a>
             <ul>
-              <li>List Item 1</li>
-              <li>List Item 2</li>
-              <li>List Item 3</li>
+              <li><a href="#text__headings">Headings</a></li>
+              <li><a href="#text__paragraphs">Paragraphs</a></li>
+              <li><a href="#text__blockquotes">Blockquotes</a></li>
+              <li><a href="#text__lists">Lists</a></li>
+              <li><a href="#text__hr">Horizontal rules</a></li>
+              <li><a href="#text__tables">Tabular data</a></li>
+              <li><a href="#text__code">Code</a></li>
+              <li><a href="#text__inline">Inline elements</a></li>
             </ul>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__hr">
+          </li>
+          <li>
+            <a href="#embedded">Embedded content</a>
+            <ul>
+              <li><a href="#embedded__images">Images</a></li>
+              <li><a href="#embedded__audio">Audio</a></li>
+              <li><a href="#embedded__video">Video</a></li>
+              <li><a href="#embedded__canvas">Canvas</a></li>
+              <li><a href="#embedded__meter">Meter</a></li>
+              <li><a href="#embedded__progress">Progress</a></li>
+              <li><a href="#embedded__svg">Inline SVG</a></li>
+              <li><a href="#embedded__iframe">IFrames</a></li>
+            </ul>
+          </li>
+          <li>
+            <a href="#forms">Form elements</a>
+            <ul>
+              <li><a href="#forms__input">Input fields</a></li>
+              <li><a href="#forms__select">Select menus</a></li>
+              <li><a href="#forms__checkbox">Checkboxes</a></li>
+              <li><a href="#forms__radio">Radio buttons</a></li>
+              <li><a href="#forms__textareas">Textareas</a></li>
+              <li><a href="#forms__html5">HTML5 inputs</a></li>
+              <li><a href="#forms__action">Action buttons</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+      <main role="main">
+        <section id="text">
           <header>
-            <h1>Horizontal rules</h1></header>
-          <div>
-            <hr>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__tables">
-          <header>
-            <h1>Tabular data</h1></header>
-          <table>
-            <caption>Table Caption</caption>
-            <thead>
-              <tr>
-                <th>Table Heading 1</th>
-                <th>Table Heading 2</th>
-                <th>Table Heading 3</th>
-                <th>Table Heading 4</th>
-                <th>Table Heading 5</th>
-              </tr>
-            </thead>
-            <tfoot>
-              <tr>
-                <th>Table Footer 1</th>
-                <th>Table Footer 2</th>
-                <th>Table Footer 3</th>
-                <th>Table Footer 4</th>
-                <th>Table Footer 5</th>
-              </tr>
-            </tfoot>
-            <tbody>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-            </tbody>
-          </table>
-          <br>
-          <h4>Table with strips. Just add the <code>striped</code> class to  <code>&lt;table&gt;</code>.</h4>
-          <table class="striped">
-            <caption>Table Caption</caption>
-            <thead>
-              <tr>
-                <th>Table Heading 1</th>
-                <th>Table Heading 2</th>
-                <th>Table Heading 3</th>
-                <th>Table Heading 4</th>
-                <th>Table Heading 5</th>
-              </tr>
-            </thead>
-            <tfoot>
-              <tr>
-                <th>Table Footer 1</th>
-                <th>Table Footer 2</th>
-                <th>Table Footer 3</th>
-                <th>Table Footer 4</th>
-                <th>Table Footer 5</th>
-              </tr>
-            </tfoot>
-            <tbody>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-              <tr>
-                <td>Table Cell 1</td>
-                <td>Table Cell 2</td>
-                <td>Table Cell 3</td>
-                <td>Table Cell 4</td>
-                <td>Table Cell 5</td>
-              </tr>
-            </tbody>
-          </table>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__code">
-          <header>
-            <h1>Code</h1></header>
-          <div>
-            <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
-            <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
-            <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
-            <h2>Pre-formatted text</h2>
-            <pre>P R E F O R M A T T E D T E X T
+            <h1>Text</h1>
+          </header>
+          <article id="text__headings">
+            <header>
+              <h1>Headings</h1>
+            </header>
+            <div>
+              <h1>Heading 1</h1>
+              <h2>Heading 2</h2>
+              <h3>Heading 3</h3>
+              <h4>Heading 4</h4>
+              <h5>Heading 5</h5>
+              <h6>Heading 6</h6>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__paragraphs">
+            <header>
+              <h1>Paragraphs</h1>
+            </header>
+            <div>
+              <p>
+                A paragraph (from the Greek paragraphos, “to write beside” or
+                “written beside”) is a self-contained unit of a discourse in
+                writing dealing with a particular point or idea. A paragraph
+                consists of one or more sentences. Though not required by the
+                syntax of any language, paragraphs are usually an expected part
+                of formal writing, used to organize longer prose.
+              </p>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__blockquotes">
+            <header>
+              <h1>Blockquotes</h1>
+            </header>
+            <div>
+              <blockquote>
+                <p>
+                  A block quotation (also known as a long quotation or extract)
+                  is a quotation in a written document, that is set off from the
+                  main text as a paragraph, or block of text.
+                </p>
+                <p>
+                  It is typically distinguished visually using indentation and a
+                  different typeface or smaller size quotation. It may or may
+                  not include a citation, usually placed at the bottom.
+                </p>
+                <cite><a href="#!">Said no one, ever.</a></cite>
+              </blockquote>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__lists">
+            <header>
+              <h1>Lists</h1>
+            </header>
+            <div>
+              <h3>Definition list</h3>
+              <dl>
+                <dt>Definition List Title</dt>
+                <dd>This is a definition list division.</dd>
+              </dl>
+              <h3>Ordered List</h3>
+              <ol>
+                <li>List Item 1</li>
+                <li>List Item 2</li>
+                <li>List Item 3</li>
+              </ol>
+              <h3>Unordered List</h3>
+              <ul>
+                <li>List Item 1</li>
+                <li>List Item 2</li>
+                <li>List Item 3</li>
+              </ul>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__hr">
+            <header>
+              <h1>Horizontal rules</h1>
+            </header>
+            <div>
+              <hr />
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__tables">
+            <header>
+              <h1>Tabular data</h1>
+            </header>
+            <table>
+              <caption>
+                Table Caption
+              </caption>
+              <thead>
+                <tr>
+                  <th>Table Heading 1</th>
+                  <th>Table Heading 2</th>
+                  <th>Table Heading 3</th>
+                  <th>Table Heading 4</th>
+                  <th>Table Heading 5</th>
+                </tr>
+              </thead>
+              <tfoot>
+                <tr>
+                  <th>Table Footer 1</th>
+                  <th>Table Footer 2</th>
+                  <th>Table Footer 3</th>
+                  <th>Table Footer 4</th>
+                  <th>Table Footer 5</th>
+                </tr>
+              </tfoot>
+              <tbody>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+              </tbody>
+            </table>
+            <br />
+            <h4>
+              Table with strips. Just add the <code>striped</code> class to
+              <code>&lt;table&gt;</code>.
+            </h4>
+            <table class="striped">
+              <caption>
+                Table Caption
+              </caption>
+              <thead>
+                <tr>
+                  <th>Table Heading 1</th>
+                  <th>Table Heading 2</th>
+                  <th>Table Heading 3</th>
+                  <th>Table Heading 4</th>
+                  <th>Table Heading 5</th>
+                </tr>
+              </thead>
+              <tfoot>
+                <tr>
+                  <th>Table Footer 1</th>
+                  <th>Table Footer 2</th>
+                  <th>Table Footer 3</th>
+                  <th>Table Footer 4</th>
+                  <th>Table Footer 5</th>
+                </tr>
+              </tfoot>
+              <tbody>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+                <tr>
+                  <td>Table Cell 1</td>
+                  <td>Table Cell 2</td>
+                  <td>Table Cell 3</td>
+                  <td>Table Cell 4</td>
+                  <td>Table Cell 5</td>
+                </tr>
+              </tbody>
+            </table>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__code">
+            <header>
+              <h1>Code</h1>
+            </header>
+            <div>
+              <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
+              <p>
+                <strong>Inline code:</strong>
+                <code>&lt;div&gt;code&lt;/div&gt;</code>
+              </p>
+              <p>
+                <strong>Sample output:</strong>
+                <samp>This is sample output from a computer program.</samp>
+              </p>
+              <h2>Pre-formatted text</h2>
+              <pre>
+P R E F O R M A T T E D T E X T
   ! " # $ % &amp; ' ( ) * + , - . /
   0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
   @ A B C D E F G H I J K L M N O
   P Q R S T U V W X Y Z [ \ ] ^ _
   ` a b c d e f g h i j k l m n o
   p q r s t u v w x y z { | } ~
-  ~ 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ </pre>
-  <pre><code>&#x3C;h2&#x3E;Pre-formatted text&#x3C;/h2&#x3E;</code></pre>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="text__inline">
-          <header>
-            <h1>Inline elements</h1></header>
-          <div>
-            <p><a href="#!">This is a text link</a>.</p>
-            <p><strong>Strong is used to indicate strong importance.</strong></p>
-            <p><em>This text has added emphasis.</em></p>
-            <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
-            <p>The <i>i element</i> is text that is offset from the normal text.</p>
-            <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
-            <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
-            <p><s>This text has a strikethrough</s>.</p>
-            <p>Superscript<sup>®</sup>.</p>
-            <p>Subscript for things like H<sub>2</sub>O.</p>
-            <p><small>This small text is small for for fine print, etc.</small></p>
-            <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
-            <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
-            <p><cite>This is a citation.</cite></p>
-            <p>The <dfn>dfn element</dfn> indicates a definition.</p>
-            <p>The <mark>mark element</mark> indicates a highlight.</p>
-            <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
-            <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-      </section>
+  ~ 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ </pre
+              >
+              <pre><code>&#x3C;h2&#x3E;Pre-formatted text&#x3C;/h2&#x3E;</code></pre>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="text__inline">
+            <header>
+              <h1>Inline elements</h1>
+            </header>
+            <div>
+              <p><a href="#!">This is a text link</a>.</p>
+              <p>
+                <strong>Strong is used to indicate strong importance.</strong>
+              </p>
+              <p><em>This text has added emphasis.</em></p>
+              <p>
+                The <b>b element</b> is stylistically different text from normal
+                text, without any special importance.
+              </p>
+              <p>
+                The <i>i element</i> is text that is offset from the normal
+                text.
+              </p>
+              <p>
+                The <u>u element</u> is text with an unarticulated, though
+                explicitly rendered, non-textual annotation.
+              </p>
+              <p>
+                <del>This text is deleted</del> and
+                <ins>This text is inserted</ins>.
+              </p>
+              <p><s>This text has a strikethrough</s>.</p>
+              <p>Superscript<sup>®</sup>.</p>
+              <p>Subscript for things like H<sub>2</sub>O.</p>
+              <p>
+                <small>This small text is small for for fine print, etc.</small>
+              </p>
+              <p>
+                Abbreviation:
+                <abbr title="HyperText Markup Language">HTML</abbr>
+              </p>
+              <p>
+                <q
+                  cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q"
+                  >This text is a short inline quotation.</q
+                >
+              </p>
+              <p><cite>This is a citation.</cite></p>
+              <p>The <dfn>dfn element</dfn> indicates a definition.</p>
+              <p>The <mark>mark element</mark> indicates a highlight.</p>
+              <p>
+                The <var>variable element</var>, such as <var>x</var> =
+                <var>y</var>.
+              </p>
+              <p>
+                The time element:
+                <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
+              </p>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+        </section>
 
-      <section id="embedded">
-        <header>
-          <h1>Embedded content</h1></header>
-        <article id="embedded__images">
+        <section id="embedded">
           <header>
-            <h2>Images</h2></header>
-          <div>
-            <h3>No <code>&lt;figure&gt;</code> element</h3>
-            <p><img src="http://unsplash.it/480/480" alt="Image alt text"></p>
-            <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
-            <figure><img src="http://unsplash.it/420/420" alt="Image alt text"></figure>
-            <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
-            <figure>
-              <img src="http://unsplash.it/420/420" alt="Image alt text">
-              <figcaption>Here is a caption for this image.</figcaption>
-            </figure>
-          </div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__audio">
+            <h1>Embedded content</h1>
+          </header>
+          <article id="embedded__images">
+            <header>
+              <h2>Images</h2>
+            </header>
+            <div>
+              <h3>No <code>&lt;figure&gt;</code> element</h3>
+              <p>
+                <img src="http://unsplash.it/480/480" alt="Image alt text" />
+              </p>
+              <h3>
+                Wrapped in a <code>&lt;figure&gt;</code> element, no
+                <code>&lt;figcaption&gt;</code>
+              </h3>
+              <figure>
+                <img src="http://unsplash.it/420/420" alt="Image alt text" />
+              </figure>
+              <h3>
+                Wrapped in a <code>&lt;figure&gt;</code> element, with a
+                <code>&lt;figcaption&gt;</code>
+              </h3>
+              <figure>
+                <img src="http://unsplash.it/420/420" alt="Image alt text" />
+                <figcaption>Here is a caption for this image.</figcaption>
+              </figure>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__audio">
+            <header>
+              <h2>Audio</h2>
+            </header>
+            <div><audio controls="">audio</audio></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__video">
+            <header>
+              <h2>Video</h2>
+            </header>
+            <div><video controls="">video</video></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__canvas">
+            <header>
+              <h2>Canvas</h2>
+            </header>
+            <div><canvas>canvas</canvas></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__meter">
+            <header>
+              <h2>Meter</h2>
+            </header>
+            <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__progress">
+            <header>
+              <h2>Progress</h2>
+            </header>
+            <div><progress>progress</progress></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__svg">
+            <header>
+              <h2>Inline SVG</h2>
+            </header>
+            <div>
+              <svg width="100px" height="100px">
+                <circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle>
+              </svg>
+            </div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+          <article id="embedded__iframe">
+            <header>
+              <h2>IFrame</h2>
+            </header>
+            <div><iframe src="index.html" height="300"></iframe></div>
+            <footer>
+              <p><a href="#top">[Top]</a></p>
+            </footer>
+          </article>
+        </section>
+        <section id="forms">
           <header>
-            <h2>Audio</h2></header>
-          <div><audio controls="">audio</audio></div>
-          <footer>
+            <h1>Form elements</h1>
+          </header>
+          <form>
+            <fieldset id="forms__input">
+              <legend>Input fields</legend>
+              <p>
+                <label for="input__text">Text Input</label>
+                <input id="input__text" type="text" placeholder="Text Input" />
+              </p>
+              <p>
+                <label for="input__password">Password</label>
+                <input
+                  id="input__password"
+                  type="password"
+                  placeholder="Type your Password"
+                />
+              </p>
+              <p>
+                <label for="input__webaddress">Web Address</label>
+                <input
+                  id="input__webaddress"
+                  type="url"
+                  placeholder="http://yoursite.com"
+                />
+              </p>
+              <p>
+                <label for="input__emailaddress">Email Address</label>
+                <input
+                  id="input__emailaddress"
+                  type="email"
+                  placeholder="name@email.com"
+                />
+              </p>
+              <p>
+                <label for="input__phone">Phone Number</label>
+                <input
+                  id="input__phone"
+                  type="tel"
+                  placeholder="(999) 999-9999"
+                />
+              </p>
+              <p>
+                <label for="input__search">Search</label>
+                <input
+                  id="input__search"
+                  type="search"
+                  placeholder="Enter Search Term"
+                />
+              </p>
+              <p>
+                <label for="input__text2">Number Input</label>
+                <input
+                  id="input__text2"
+                  type="number"
+                  placeholder="Enter a Number"
+                />
+              </p>
+              <p>
+                <label for="input__text3" class="error">Error</label>
+                <input
+                  id="input__text3"
+                  class="error"
+                  type="text"
+                  placeholder="Text Input"
+                />
+              </p>
+              <p>
+                <label for="input__text4" class="success">Valid</label>
+                <input
+                  id="input__text4"
+                  class="success"
+                  type="text"
+                  placeholder="Text Input"
+                />
+              </p>
+              <p>
+                <label for="input__text5">Disabled Text Input</label>
+                <input
+                  id="input__text5"
+                  type="text"
+                  placeholder="Disabled Text Input"
+                  disabled
+                />
+              </p>
+              <p class="grouped">
+                <input
+                  type="search"
+                  name="input__text6"
+                  id="input__text6"
+                  placeholder="Search"
+                />
+                <button class="button icon-only">
+                  <img src="https://icongr.am/feather/search.svg?size=16" />
+                </button>
+              </p>
+              <p class="grouped">
+                <input
+                  type="text"
+                  name="input__text7"
+                  id="input__text7"
+                  placeholder="Username"
+                />
+                <input
+                  type="text"
+                  name="input__text8"
+                  id="input__text8"
+                  placeholder="Password"
+                />
+                <button class="button primary">Submit</button>
+              </p>
+            </fieldset>
             <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__video">
-          <header>
-            <h2>Video</h2></header>
-          <div><video controls="">video</video></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__canvas">
-          <header>
-            <h2>Canvas</h2></header>
-          <div><canvas>canvas</canvas></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__meter">
-          <header>
-            <h2>Meter</h2></header>
-          <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__progress">
-          <header>
-            <h2>Progress</h2></header>
-          <div><progress>progress</progress></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__svg">
-          <header>
-            <h2>Inline SVG</h2></header>
-          <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-        <article id="embedded__iframe">
-          <header>
-            <h2>IFrame</h2></header>
-          <div><iframe src="index.html" height="300"></iframe></div>
-          <footer>
-            <p><a href="#top">[Top]</a></p>
-          </footer>
-        </article>
-      </section>
-      <section id="forms">
-        <header>
-          <h1>Form elements</h1></header>
-        <form>
-          <fieldset id="forms__input">
-            <legend>Input fields</legend>
-            <p>
-              <label for="input__text">Text Input</label>
-              <input id="input__text" type="text" placeholder="Text Input">
-            </p>
-            <p>
-              <label for="input__password">Password</label>
-              <input id="input__password" type="password" placeholder="Type your Password">
-            </p>
-            <p>
-              <label for="input__webaddress">Web Address</label>
-              <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
-            </p>
-            <p>
-              <label for="input__emailaddress">Email Address</label>
-              <input id="input__emailaddress" type="email" placeholder="name@email.com">
-            </p>
-            <p>
-              <label for="input__phone">Phone Number</label>
-              <input id="input__phone" type="tel" placeholder="(999) 999-9999">
-            </p>
-            <p>
-              <label for="input__search">Search</label>
-              <input id="input__search" type="search" placeholder="Enter Search Term">
-            </p>
-            <p>
-              <label for="input__text2">Number Input</label>
-              <input id="input__text2" type="number" placeholder="Enter a Number">
-            </p>
-            <p>
-              <label for="input__text3" class="error">Error</label>
-              <input id="input__text3" class="error" type="text" placeholder="Text Input">
-            </p>
-            <p>
-              <label for="input__text4" class="success">Valid</label>
-              <input id="input__text4" class="success" type="text" placeholder="Text Input">
-            </p>
-            <p>
-              <label for="input__text5">Disabled Text Input</label>
-              <input id="input__text5" type="text" placeholder="Disabled Text Input" disabled>
-            </p>
-            <p class="grouped">
-              <input type="search" name="input__text6" id="input__text6" placeholder="Search">
-              <button class="button icon-only"><img src="https://icongr.am/feather/search.svg?size=16"></button>
-            </p>
-            <p class="grouped">
-              <input type="text" name="input__text7" id="input__text7" placeholder="Username">
-              <input type="text" name="input__text8" id="input__text8" placeholder="Password">
-              <button class="button primary">Submit</button>
-            </p>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__select">
-            <legend>Select menus</legend>
-            <p>
-              <label for="select">Select</label>
-              <select id="select">
+            <fieldset id="forms__select">
+              <legend>Select menus</legend>
+              <p>
+                <label for="select">Select</label>
+                <select id="select">
                   <optgroup label="Option Group">
                     <option>Option One</option>
                     <option>Option Two</option>
                     <option>Option Three</option>
                   </optgroup>
                 </select>
-            </p>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__checkbox">
-            <legend>Checkboxes</legend>
-            <ul class="list list--bare">
-              <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
-              <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
-              <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
-            </ul>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__radio">
-            <legend>Radio buttons</legend>
-            <ul class="list list--bare">
-              <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
-              <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
-              <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
-            </ul>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__textareas">
-            <legend>Textareas</legend>
-            <p>
-              <label for="textarea">Textarea</label>
-              <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
-            </p>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__html5">
-            <legend>HTML5 inputs</legend>
-            <p>
-              <label for="ic">Color input</label>
-              <input type="color" id="ic" value="#000000">
-            </p>
-            <p>
-              <label for="in">Number input</label>
-              <input type="number" id="in" min="0" max="10" value="5">
-            </p>
-            <p>
-              <label for="ir">Range input</label>
-              <input type="range" id="ir" value="10">
-            </p>
-            <p>
-              <label for="idd">Date input</label>
-              <input type="date" id="idd" value="1970-01-01">
-            </p>
-            <p>
-              <label for="idm">Month input</label>
-              <input type="month" id="idm" value="1970-01">
-            </p>
-            <p>
-              <label for="idw">Week input</label>
-              <input type="week" id="idw" value="1970-W01">
-            </p>
-            <p>
-              <label for="idt">Datetime input</label>
-              <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
-            </p>
-            <p>
-              <label for="idtl">Datetime-local input</label>
-              <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
-            </p>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-          <fieldset id="forms__action">
-            <legend>Action buttons</legend>
-            <p>
-              <input type="submit" value="<input type=submit>">
-              <input type="button" value="<input type=button>">
-              <input type="reset" value="<input type=reset>">
-              <input type="submit" value="<input disabled>" disabled>
-            </p>
-            <p>
-              <button type="submit">&lt;button type=submit&gt;</button>
-              <button type="button">&lt;button type=button&gt;</button>
-              <button type="reset">&lt;button type=reset&gt;</button>
-              <button type="button" disabled>&lt;button disabled&gt;</button>
-            </p>
-            <p>
-              <a href="#" class="button">a.button</a>
-              <a href="#" class="button primary">a.button.primary</a>
-              <a href="#" class="button secondary">a.button.secondary</a>
-              <a href="#" class="button dark">a.button.dark</a>
-              <a href="#" class="button error">a.button.error</a>
-              <a href="#" class="button success">a.button.success</a>
-            </p>
-            <p>
-              <a href="#" class="button outline">a.button.outline</a>
-              <a href="#" class="button outline primary">a.button.outline.primary</a>
-              <a href="#" class="button outline secondary">a.button.outline.secondary</a>
-              <a href="#" class="button outline dark">a.button.outline.dark</a>
-              <a href="#" class="button clear">a.button.clear</a>
-            </p>
-          </fieldset>
-          <p><a href="#top">[Top]</a></p>
-        </form>
-      </section>
-    </main>
-  </div>
-  <script src="../docs/main.js"></script>
-</body>
-
+              </p>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__checkbox">
+              <legend>Checkboxes</legend>
+              <ul class="list list--bare">
+                <li>
+                  <label for="checkbox1"
+                    ><input
+                      id="checkbox1"
+                      name="checkbox"
+                      type="checkbox"
+                      checked="checked"
+                    />
+                    Choice A</label
+                  >
+                </li>
+                <li>
+                  <label for="checkbox2"
+                    ><input id="checkbox2" name="checkbox" type="checkbox" />
+                    Choice B</label
+                  >
+                </li>
+                <li>
+                  <label for="checkbox3"
+                    ><input id="checkbox3" name="checkbox" type="checkbox" />
+                    Choice C</label
+                  >
+                </li>
+              </ul>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__radio">
+              <legend>Radio buttons</legend>
+              <ul class="list list--bare">
+                <li>
+                  <label for="radio1"
+                    ><input
+                      id="radio1"
+                      name="radio"
+                      type="radio"
+                      class="radio"
+                      checked="checked"
+                    />
+                    Option 1</label
+                  >
+                </li>
+                <li>
+                  <label for="radio2"
+                    ><input
+                      id="radio2"
+                      name="radio"
+                      type="radio"
+                      class="radio"
+                    />
+                    Option 2</label
+                  >
+                </li>
+                <li>
+                  <label for="radio3"
+                    ><input
+                      id="radio3"
+                      name="radio"
+                      type="radio"
+                      class="radio"
+                    />
+                    Option 3</label
+                  >
+                </li>
+              </ul>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__textareas">
+              <legend>Textareas</legend>
+              <p>
+                <label for="textarea">Textarea</label>
+                <textarea
+                  id="textarea"
+                  rows="8"
+                  cols="48"
+                  placeholder="Enter your message here"
+                ></textarea>
+              </p>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__html5">
+              <legend>HTML5 inputs</legend>
+              <p>
+                <label for="ic">Color input</label>
+                <input type="color" id="ic" value="#000000" />
+              </p>
+              <p>
+                <label for="in">Number input</label>
+                <input type="number" id="in" min="0" max="10" value="5" />
+              </p>
+              <p>
+                <label for="ir">Range input</label>
+                <input type="range" id="ir" value="10" />
+              </p>
+              <p>
+                <label for="idd">Date input</label>
+                <input type="date" id="idd" value="1970-01-01" />
+              </p>
+              <p>
+                <label for="idm">Month input</label>
+                <input type="month" id="idm" value="1970-01" />
+              </p>
+              <p>
+                <label for="idw">Week input</label>
+                <input type="week" id="idw" value="1970-W01" />
+              </p>
+              <p>
+                <label for="idt">Datetime input</label>
+                <input type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
+              </p>
+              <p>
+                <label for="idtl">Datetime-local input</label>
+                <input
+                  type="datetime-local"
+                  id="idtl"
+                  value="1970-01-01T00:00"
+                />
+              </p>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__action">
+              <legend>Action buttons</legend>
+              <p>
+                <input type="submit" value="<input type=submit>" />
+                <input type="button" value="<input type=button>" />
+                <input type="reset" value="<input type=reset>" />
+                <input type="submit" value="<input disabled>" disabled />
+              </p>
+              <p>
+                <button type="submit">&lt;button type=submit&gt;</button>
+                <button type="button">&lt;button type=button&gt;</button>
+                <button type="reset">&lt;button type=reset&gt;</button>
+                <button type="button" disabled>&lt;button disabled&gt;</button>
+              </p>
+              <p>
+                <a href="#" class="button">a.button</a>
+                <a href="#" class="button primary">a.button.primary</a>
+                <a href="#" class="button secondary">a.button.secondary</a>
+                <a href="#" class="button dark">a.button.dark</a>
+                <a href="#" class="button error">a.button.error</a>
+                <a href="#" class="button success">a.button.success</a>
+              </p>
+              <p>
+                <a href="#" class="button outline">a.button.outline</a>
+                <a href="#" class="button outline primary"
+                  >a.button.outline.primary</a
+                >
+                <a href="#" class="button outline secondary"
+                  >a.button.outline.secondary</a
+                >
+                <a href="#" class="button outline dark"
+                  >a.button.outline.dark</a
+                >
+                <a href="#" class="button clear">a.button.clear</a>
+              </p>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
+          </form>
+        </section>
+      </main>
+    </div>
+    <script src="../docs/main.js"></script>
+  </body>
 </html>