diff --git a/docs/docs.css b/docs/docs.css
new file mode 100644
index 000000000..d5ee28067
--- /dev/null
+++ b/docs/docs.css
@@ -0,0 +1,190 @@
+html, body {
+  background-color: #fcfcfe;
+}
+
+.body {
+  padding: 50px 0px;
+}
+
+.logo {
+  font-size: 100px;
+  text-align: center;
+  line-height: 70px;
+}
+
+.list {
+  width: 250px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.list li {
+  margin-bottom: 5px;
+  white-space: nowrap;
+}
+
+.content {
+  width: 1200px;
+  background-color: rgb(255, 255, 255)
+}
+
+#demo {
+  position: relative;
+  margin: 0px auto;
+  padding: 0px;
+  width: 600px;
+  height: 400px;
+  overflow: hidden;
+}
+
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%, 100% {
+      transform: rotate(0);
+ }
+  20%, 60% {
+      transform: rotate(-25deg);
+ }
+  40%, 80% {
+      transform: rotate(10deg);
+ }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+ }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+ }
+}
+
+.scrollbar {
+  margin-left: 30px;
+  float: left;
+  height: 300px;
+  width: 65px;
+  background: #fff;
+  overflow-y: scroll;
+  margin-bottom: 25px;
+}
+
+.force-overflow {
+  min-height: 450px;
+}
+
+.scrollbar-primary::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-primary::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #4285F4;
+}
+
+.scrollbar-danger::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-danger::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-danger::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #ff3547;
+}
+
+.scrollbar-warning::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-warning::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-warning::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #FF8800;
+}
+
+.scrollbar-success::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-success::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-success::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #00C851;
+}
+
+.scrollbar-info::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-info::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-info::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #33b5e5;
+}
+
+.scrollbar-default::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-default::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-default::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #2BBBAD;
+}
+
+.scrollbar-secondary::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-secondary::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-secondary::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #aa66cc;
+}
diff --git a/docs/index.html b/docs/index.html
index 76cabf1fc..236c6aa34 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,82 +5,6 @@
   <meta charset="UTF-8">
   <title>perfect-scrollbar</title>
   <link href="perfect-scrollbar.css" rel="stylesheet">
-  <style>
-    .github-corner:hover .octo-arm {
-      animation: octocat-wave 560ms ease-in-out;
-    }
-
-    @keyframes octocat-wave {
-
-      0%,
-      100% {
-        transform: rotate(0);
-      }
-
-      20%,
-      60% {
-        transform: rotate(-25deg);
-      }
-
-      40%,
-      80% {
-        transform: rotate(10deg);
-      }
-    }
-
-    @media (max-width: 500px) {
-      .github-corner:hover .octo-arm {
-        animation: none;
-      }
-
-      .github-corner .octo-arm {
-        animation: octocat-wave 560ms ease-in-out;
-      }
-    }
-
-  </style>
-  <style>
-    html,
-    body {
-      background-color: #fcfcfe;
-    }
-
-    .body {
-      padding: 50px 0px;
-    }
-
-    .logo {
-      font-size: 100px;
-      text-align: center;
-      line-height: 70px;
-    }
-
-    .list {
-      width: 250px;
-      margin: 0 auto;
-      text-align: left;
-    }
-
-    .list li {
-      margin-bottom: 5px;
-      white-space: nowrap;
-    }
-
-    .content {
-      width: 1200px;
-      background-color: rgb(255, 255, 255)
-    }
-
-    #demo {
-      position: relative;
-      margin: 0px auto;
-      padding: 0px;
-      width: 600px;
-      height: 400px;
-      overflow: hidden;
-    }
-
-  </style>
 
   <!-- Bootstrap core CSS for better functionality-->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
@@ -89,6 +13,8 @@
   <!-- Awesome Material Design for Bootstrap Styles -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">
 
+  <link href="docs.css" rel="stylesheet">
+
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 <body>
@@ -135,9 +61,7 @@ <h2><i>perfect</i> means...</h2>
         <div class="content p-5 white rgba-white-strong rounded" style="width:1200px;">
           <h2 class="font-weight-bold text-center ">Hello I'm a piece of example content!</h2>
           <p class="lead mb-3 text-center ">You can just scroll trough me and marvel at the perfection of this
-            scrollbar,
-            but
-            I'm also full of surprises!</p>
+            scrollbar, but I'm also full of surprises!</p>
 
           <section class="my-4">
             <hr>
@@ -283,135 +207,6 @@ <h3>We are beautiful and colorful</h3>
               more about us!</a>
             <div class="row mt-3 justify-content-center">
 
-              <style>
-                .scrollbar {
-                  margin-left: 30px;
-                  float: left;
-                  height: 300px;
-                  width: 65px;
-                  background: #fff;
-                  overflow-y: scroll;
-                  margin-bottom: 25px;
-                }
-
-                .force-overflow {
-                  min-height: 450px;
-                }
-
-                .scrollbar-primary::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-primary::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #4285F4;
-                }
-
-                .scrollbar-danger::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-danger::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-danger::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #ff3547;
-                }
-
-                .scrollbar-warning::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-warning::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-warning::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #FF8800;
-                }
-
-                .scrollbar-success::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-success::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-success::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #00C851;
-                }
-
-                .scrollbar-info::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-info::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-info::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #33b5e5;
-                }
-
-                .scrollbar-default::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-default::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-default::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #2BBBAD;
-                }
-
-                .scrollbar-secondary::-webkit-scrollbar-track {
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #F5F5F5;
-                  border-radius: 10px;
-                }
-
-                .scrollbar-secondary::-webkit-scrollbar {
-                  width: 12px;
-                  background-color: #F5F5F5;
-                }
-
-                .scrollbar-secondary::-webkit-scrollbar-thumb {
-                  border-radius: 10px;
-                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-                  background-color: #aa66cc;
-                }
-
-              </style>
               <div class="scrollbar scrollbar-primary">
                 <div class="force-overflow"></div>
               </div>
@@ -629,9 +424,6 @@ <h3>I'm saying goodbye!</h3>
             </p>
           </section>
 
-
-
-
         </div>
         <!--EXAMPLE CONTENT-->
       </div>
@@ -656,22 +448,20 @@ <h3>I'm saying goodbye!</h3>
       </ul>
     </div>
 
-
     <h2 class="text-center">Code</h2>
     <div class="d-flex justify-content-center">
       <div class=" p-2 rounded" style="background-color: #fcfcfe;">
 
         <pre>
               const ps = new PerfectScrollbar(demoDiv);
-                
+
                 button.addEventListener('click', () => {
                   demoDiv.style.width = `${widthInput.value}px`;
                   demoDiv.style.height = `${heightInput.value}px`;
-                
+
                   ps.update();
                 });
-</pre>
-
+        </pre>
 
       </div>
     </div>
@@ -717,11 +507,8 @@ <h2>
 
     </div>
 
-
-
   </div>
 
-
   <script src="perfect-scrollbar.min.js"></script>
   <script>
     // Initialize the plugin