From 2f78fa99066f6962a24613f2600ea65c35416d00 Mon Sep 17 00:00:00 2001
From: Doron-Bargo <62555360+Doron-Bargo@users.noreply.github.com>
Date: Tue, 9 Jan 2024 22:23:36 +0200
Subject: [PATCH 1/2] fix colors, add demo and trial buttons

---
 docusaurus.config.js                  |  24 +-
 package.json                          |   2 +-
 src/css/bck_custom.css                | 674 +++++++++++++++++++++
 src/css/custom.css                    | 841 ++++++--------------------
 src/css/default-fonts-and-colors.scss | 240 ++++++++
 yarn.lock                             |   5 +
 6 files changed, 1136 insertions(+), 650 deletions(-)
 create mode 100644 src/css/bck_custom.css
 create mode 100644 src/css/default-fonts-and-colors.scss

diff --git a/docusaurus.config.js b/docusaurus.config.js
index bd5b1aa9..e742f017 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,9 +1,9 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-
+// const lightCodeTheme = require('prism-react-renderer/themes/github');
+// const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
+//import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -148,6 +148,16 @@ const config = {
           {to: 'https://api-docs.logz.io/docs/logz/logz-io-api', label: 'API', position: 'left'},
           {to: 'https://status.logz.io/', label: 'System status', position: 'left'},
           {to: 'https://logz.io/blog/', label: 'Blog', position: 'left'},
+          {
+            href: 'https://logz.io/request-demo/',
+            label: 'Get a Demo',
+            position: 'right',
+          },
+          {
+            href: 'https://logz.io/freetrial/',
+            label: 'Free Trial',
+            position: 'right',
+          },
           {
             href: 'https://app.logz.io/',
             label: 'Login',
@@ -236,10 +246,10 @@ const config = {
         ],
         copyright: `Copyright © ${new Date().getFullYear()} Logshero Ltd.`,
       },
-      prism: {
-        theme: lightCodeTheme,
-        //darkTheme: darkCodeTheme.dracula,
-      },
+      // prism: {
+      //  theme: prismThemes.github,
+      //  darkTheme: prismThemes.dracula,
+      // },
     }),
 };
 
diff --git a/package.json b/package.json
index ff11a29f..366cdc7c 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "docusaurus": "^1.14.7",
     "docusaurus-plugin-hotjar": "^0.0.2",
     "docusaurus-plugin-includes": "^1.1.4",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "tslib": "^2.5.0"
diff --git a/src/css/bck_custom.css b/src/css/bck_custom.css
new file mode 100644
index 00000000..de1ff726
--- /dev/null
+++ b/src/css/bck_custom.css
@@ -0,0 +1,674 @@
+/* ===== FONT IMPORTS ===== */
+/* Roboto (body) and Titillium (heading) 
+@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');
+ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap'); 
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i'); */
+
+@use 'default-fonts-and-colors';
+
+/* ===== CSS IMPORTS ===== */
+
+/* If you need to import more css files, put them at the bottom of the list. */
+
+/* ===== PAGE LAYOUT ===== */
+
+body {
+  padding: 0;
+  margin: 0 auto;
+}
+
+.test {
+  color: red !important;
+}
+
+div.big-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+}
+
+.title-container {
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+div.body-container {
+  max-width: 850px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-bottom: 200px;
+}
+
+div.card-container {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 50px;
+}
+
+div.body-container, div.card-container {
+  vertical-align: top;
+  margin-top: 2rem;
+  justify-self: start;
+}
+
+/* media queries */
+
+@media (max-width: 630px) {
+  #log-in {
+    display: none;
+  }
+}
+
+@media (max-width: 975px) {
+/* toc hides at this size */
+
+  header, footer {
+    padding: 0 10px;
+  }
+
+  div.site-badge {
+    min-width: 145px !important;
+  }
+
+  div#toc-collapse-btn {
+    display: inline-block !important;
+  }
+
+  .toc-visibility {
+    display: none !important;
+  }
+
+  div.toc-container {
+    position: fixed;
+    width: 300px;
+    display: block;
+    top: 25px;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+    z-index: 50;
+    }
+
+  div.site-badge img.logz-logo {
+    display: none;
+  }
+
+  div.site-badge img.logz-symbol {
+    display: inline !important;
+  }
+}
+
+@media (max-width: 1210px) {
+  nav.site-links {
+    display: none;
+  }
+
+  nav.site-actions {
+    padding: 0;
+  }
+}
+
+/* ===== BASE STYLES ===== */
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.7rem;
+  color: var(--text-normal);
+}
+
+p {
+  margin-bottom: 1.25rem;
+  margin-top: 1.25rem;
+}
+
+code, pre {
+  font-family: var(--mono-font);
+  font-size: .8rem;
+  color:#e53935;
+  background-color: #f6f8fa;
+}
+
+
+
+main.page-content img, main.page-content video, .post-content iframe {
+  display: block;
+  max-width: 90%;
+  margin: 1.5rem auto;
+  border: 1px solid var(--border-very-light);
+  border-radius: 2px;
+}
+
+main {
+  margin-top: 5px;
+  border-top: 1px solid var(--border-very-light);
+}
+
+.btn-img, .override.btn-img, p.override.btn-img img {
+  margin-left: 0;
+  padding-left: 0;
+  border: none;
+  border-radius: unset;
+}
+
+ol img, ol video {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.no-border {
+  border: none !important;
+}
+
+
+a, a:hover {
+  color: var(--text-link);
+  text-decoration: none;
+  color:#2c8eb8
+}
+
+a.no-link {
+  color: var(--text-normal);
+  cursor: text;
+}
+
+svg.svg-inline--fa, i.li {
+  /* add some breathing room to inline font awesome icons */
+  margin-left: .1rem;
+  margin-right: .1rem;
+}
+
+.fancy-link::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 2px;
+  margin-top: -2px;
+  background: currentColor;
+  transition: width .3s;
+}
+
+.fancy-link:hover::after {
+  width: 100%;
+}
+
+
+/* ===== ONE-OFFS ===== */
+.sm {
+  font-size: .8rem;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.ital {
+  font-style: italic;
+}
+
+.padding-top-10 {
+  padding-top: 10px;
+}
+
+.updated {
+  font-size: .9rem;
+}
+
+.border {
+  border: 1px solid var(--border-dark);
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 6px;
+}
+
+.background {
+  background-color: var(--background-light)
+}
+
+
+/* ===== TABLES ===== */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 2rem auto 2rem 0;
+
+  text-align: left;
+}
+
+td, th {
+  padding: .25rem .75rem;
+}
+
+th {
+  color: var(--heading-normal);
+}
+
+tr {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+/* tablesorter styling */
+th.tablesorter-header {
+  min-width: 75px;
+}
+
+th.tablesorter-header:focus {
+  outline: none;
+}
+
+.tablesorter-header-inner::after {
+  font-family: var(--fa);
+  padding-left: 10px;
+  color: var(--text-link);
+}
+
+.tablesorter-headerAsc .tablesorter-header-inner::after {
+  content: "\f0d7";
+}
+
+.tablesorter-headerDesc .tablesorter-header-inner::after {
+  content: "\f0d8"
+}
+
+/* ===== CONTRIBUTORS LIST ===== */
+
+div.article-info-container {
+  font-size: .9rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.article-info-container > div {
+  display: flex;
+}
+
+.article-info-container > div > *:not(:last-child), .article-info-container > div:not(:last-child) {
+  margin-right: 1rem;
+}
+
+div.contributor-list svg {
+  margin-right: .25rem;
+}
+
+/* ===== CONTRIBUTORS ===== */
+
+div.contributor-title {
+  font-size: 1.2rem;
+}
+
+div.contributor.icons {
+  font-size: 2rem;
+  padding-bottom: 1.5rem;
+  padding-top: .25rem;
+}
+
+div.contributor.icons a {
+  margin-right: .5rem;
+  color: var(--text-light);
+}
+
+.contributor.icons a:hover {
+  color: var(--text-link);
+}
+
+div.contributions {
+  margin-top: 1.5rem;
+}
+
+div.contributions ul {
+  padding-left: 0;
+  list-style-type: none;
+  margin-right: 5px;
+}
+
+div.contributions ul > li {
+  padding-bottom: .5rem;
+}
+
+/* ===== FEEDBACK BUTTONS ===== */
+
+.feedback-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  margin-top: 4rem;
+  border-top: 1px solid var(--border-light);
+  padding-top: .25rem;
+}
+
+.feedback-container > .feedback.inline-header {
+  margin-top: 4px;
+  color: var(--heading-blue);
+}
+
+.feedback-container > *:not(:last-child) {
+  margin-right: 2rem;
+}
+
+.feedback.button a {
+  color: unset;
+}
+
+.slackin {
+  align-self: center;
+  padding: unset;
+  margin-bottom: -0.5rem;
+  margin-left: auto;
+}
+
+.feedback.button.edit {
+  color: var(--logz-logo-normal);
+}
+
+.feedback.button.issue {
+  color: rgb(var(--app-orange-40));
+}
+
+.feedback.button svg {
+  margin-bottom: -2px;
+  margin-right: 1px;
+  fill: currentColor;
+}
+
+/* ===== RELATED LINKS ===== */
+
+div.related-links-container div {
+  margin-bottom: 2rem;
+  font-size: .8rem;
+}
+
+div.related-links-container ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+div.related-links-container span {
+  font-weight: 700;
+  color: var(--heading-normal);
+}
+
+/* ===== ACCORDIONS & TABS ===== */
+
+details {
+  background-color: var(--background-very-light);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  padding: .4rem 1rem;
+  margin-bottom: 5px;
+}
+
+details[open] > summary {
+  border-bottom: 3px solid currentColor;
+  font-weight: 600;
+}
+
+details > summary:hover {
+  font-weight: 600;
+}
+
+summary {
+  padding-left: .7rem;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+summary > p {
+  display: inline-block;
+  color: var(--heading-normal);
+  margin: unset;
+}
+
+.branching-container {
+  width: 100%;
+}
+
+.branching-tabs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 50px 0 0 0;
+  padding: 0;
+  background: none;
+  list-style-type: none;
+  border-bottom: 2px solid var(--border-very-light);
+}
+
+ol .branching-tabs {
+  margin-top: 25px;
+}
+
+.branching-tabs li {
+  display: inline-block;
+  margin-bottom: 2px;
+  color: var(--tab-inactive);
+}
+
+.branching-tabs li.active, .branching-tabs li:hover {
+  border-bottom: 4px solid currentColor;
+  margin-bottom: -2px;
+}
+
+.branching-tabs li.active {
+  font-weight: 400;
+  color: var(--text-normal);
+}
+
+.branching-tabs li > a {
+  color: unset;
+  display: block;
+  margin: 0;
+  padding: 0px 24px 1px 24px;
+}
+
+.branching-container > div {
+  padding-top: 12px;
+}
+
+/* ===== LOG SHIPPING PAGES ===== */
+
+#on-this-page-toc {
+  background-color: var(--background-very-light);
+  border: 1px solid var(--border-very-light);
+  border-radius: 5px;
+  padding-left: 15px;
+}
+
+#on-this-page-toc div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  padding: 0;
+  margin-top: 1rem;
+  line-height: 1.25rem;
+}
+
+#on-this-page-toc div a {
+  display: block;
+  font-size: 1rem;
+  margin-right: 20px;
+  margin-bottom: 15px;
+  cursor: pointer;
+}
+
+.breadcrumbs {
+  margin-bottom: 1rem;
+  font-size: .9rem;
+  color: var(--text-link-gray);
+}
+
+.breadcrumbs span:not(:last-child)::after {
+  content: " > ";
+}
+
+/* ===== COPY BUTTON ===== */
+
+div.highlighter-rouge {
+  position: relative;
+}
+
+.copy-btn {
+  width: fit-content;
+  height: fit-content;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  padding: 1px;
+  margin: 0;
+
+  opacity: .25;
+  transition: opacity .5s ease;
+}
+
+.copy-btn::before {
+  font-size: .75rem;
+  font-weight: 700;
+  padding: 0 4px;
+  background-color: var(--text-normal);
+  color: white;
+  margin-top: -3px;
+  border-radius: 6px;
+}
+
+.copy-btn:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.copy-btn:hover::before {
+  content: "Copy";
+}
+
+.copy-btn:hover::before {
+  content: "Copy";
+}
+
+.copy-btn.copied {
+  opacity: 1;
+}
+
+.copy-btn.copied::before {
+  content: "Copied!";
+}
+
+/* ===== GITHUB AVATARS ===== */
+
+.avatar.avatar-small {
+  display: inline-block;
+  margin: 0 0 0 0;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+
+h1 .avatar.avatar-small {
+  margin-right: .75rem;
+  margin-top: -4px;
+}
+
+.contributor-list .avatar.avatar-small {
+  margin: 0 1px;
+}
+
+/* ===== OPEN SOURCE BUTTON ===== */
+
+.open-source-btn {
+  color: var(--text-normal);
+  border: 1px solid silver;
+  width: fit-content;
+  border-radius: 3px;
+  padding: 0px 4px;
+  font-size: .85rem;
+  font-weight: 600;
+  background: linear-gradient(to bottom, white, var(--background-light));
+  line-height: 1;
+}
+
+.open-source-btn:hover {
+  background: linear-gradient(to bottom, var(--background-very-light), silver);
+}
+
+.rss-button a {
+  color: orange;
+  border: 1px solid currentColor;
+  font-weight: 700;
+  width: fit-content;
+  padding: 0 5px;
+  border-radius: 6px;
+  margin: 0;
+}
+
+.rss-button a:hover {
+  color: white;
+  background-color: orange;
+  border: 1px solid currentColor;
+}
+
+
+/* ===== FPO - IMAGE PLACEHOLDERS ===== */
+.fpo {
+  display: flex;
+  max-width: 80%;
+  height: 100px;
+  margin: 1.5rem auto;
+  border: 1px solid var(--border-dark);
+  border-radius: 2px;
+  background-color: var(--background-light);
+  justify-content: center;
+}
+
+.fpo::after {
+  content: "[ You really should do something about this placeholder. ]";
+  justify-self: center;
+  align-self: center;
+  text-align: center;
+  color: var(--text-code);
+  font-weight: 700;
+  font-size: .9rem;
+}
+
+.fpo.fpo-1::after {
+  content: "[ Nothing lasts forever, including this placeholder. ]";
+}
+
+.fpo.fpo-2::after {
+  content: "[ You are irreplacable. This placeholder, though... ]";
+}
+
+.fpo.fpo-3::after {
+  content: "[ A picture is worth a thousand words. This placeholder... not so much. ]";
+}
+
+.fpo.fpo-4::after {
+  content: "[ Picture this: A rustic hunting lodge, my latest kill roasting over the fire, and this placeholder isn't just a placeholder. ]"
+}
+
+/* ===== Split line ===== */
+
+.releaseSidebarHeading {
+  @apply !mt-2 border-t-secondary-700 pt-1;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+/* ===== try new sidebar headers ==== */
+.section-title.tutorial > div >a::before {
+  background-image: url(../../static/img/alert.svg);
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 95ad1c6c..fe07500d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,661 +1,217 @@
-/* ===== FONT IMPORTS ===== */
-/* Roboto (body) and Titillium (heading) */
-@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');
-/* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap'); */
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i');
-
-/* ===== CSS IMPORTS ===== */
-
-/* If you need to import more css files, put them at the bottom of the list. */
-
-/* ===== PAGE LAYOUT ===== */
-
-body {
-  padding: 0;
-  margin: 0 auto;
-}
-
-.test {
-  color: red !important;
-}
-
-div.big-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  align-content: flex-start;
-}
-
-.title-container {
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-div.body-container {
-  max-width: 850px;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 25px;
-  padding-right: 25px;
-  padding-bottom: 200px;
-}
-
-div.card-container {
-  max-width: 1000px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-bottom: 50px;
-}
-
-div.body-container, div.card-container {
-  vertical-align: top;
-  margin-top: 2rem;
-  justify-self: start;
-}
-
-/* media queries */
-
-@media (max-width: 630px) {
-  #log-in {
-    display: none;
-  }
-}
-
-@media (max-width: 975px) {
-/* toc hides at this size */
-
-  header, footer {
-    padding: 0 10px;
-  }
-
-  div.site-badge {
-    min-width: 145px !important;
-  }
-
-  div#toc-collapse-btn {
-    display: inline-block !important;
-  }
-
-  .toc-visibility {
-    display: none !important;
-  }
-
-  div.toc-container {
-    position: fixed;
-    width: 300px;
-    display: block;
-    top: 25px;
-    left: 0;
-    bottom: 0;
-    overflow-y: auto;
-    z-index: 50;
-    }
-
-  div.site-badge img.logz-logo {
-    display: none;
-  }
-
-  div.site-badge img.logz-symbol {
-    display: inline !important;
-  }
-}
-
-@media (max-width: 1210px) {
-  nav.site-links {
-    display: none;
-  }
-
-  nav.site-actions {
-    padding: 0;
-  }
-}
-
-/* ===== BASE STYLES ===== */
-
-html {
-  font-size: 16px;
-}
-
-body {
-  font-family: var(--body-font);
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.7rem;
-  color: var(--text-normal);
-}
-
-p {
-  margin-bottom: 1.25rem;
-  margin-top: 1.25rem;
-}
-
-code, pre {
-  font-family: var(--mono-font);
-  font-size: .8rem;
-  color:#e53935;
-  background-color: #f6f8fa;
-}
-
-
-
-main.page-content img, main.page-content video, .post-content iframe {
-  display: block;
-  max-width: 90%;
-  margin: 1.5rem auto;
-  border: 1px solid var(--border-very-light);
-  border-radius: 2px;
-}
-
-main {
-  margin-top: 5px;
-  border-top: 1px solid var(--border-very-light);
-}
-
-.btn-img, .override.btn-img, p.override.btn-img img {
-  margin-left: 0;
-  padding-left: 0;
-  border: none;
-  border-radius: unset;
-}
-
-ol img, ol video {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.no-border {
-  border: none !important;
-}
-
-
-a, a:hover {
-  color: var(--text-link);
-  text-decoration: none;
-  color:#2c8eb8
-}
-
-a.no-link {
-  color: var(--text-normal);
-  cursor: text;
-}
-
-svg.svg-inline--fa, i.li {
-  /* add some breathing room to inline font awesome icons */
-  margin-left: .1rem;
-  margin-right: .1rem;
-}
-
-.fancy-link::after {
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  /*
+  See css var + hsl color palette technique:
+  https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/
+   */
+  
+  --site-primary-hue-saturation: 167 68%;
+  --site-primary-hue-saturation-light: 167 56%; /* do we really need this extra one? */
+  --site-color-favorite-background: #f6fdfd;
+  --site-color-tooltip: #fff;
+  --site-color-tooltip-background: #353738;
+  --site-color-svg-icon-favorite: #e9669e;
+  --site-color-checkbox-checked-bg: hsl(210deg 56% 73% / 25%);
+  --site-color-feedback-background: #fff;
+  --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
+  /* Use a darker color to ensure contrast, ideally we don't need important */
+  --ifm-breadcrumb-color-active: var(--ifm-color-primary-darker) !important;
+  --ifm-menu-color-active: var(--ifm-color-primary-darker) !important;
+}
+
+html[data-theme='dark'] {
+  --site-color-feedback-background: #f0f8ff;
+  --site-color-favorite-background: #1d1e1e;
+  --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
+  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
+}
+
+/*
+ * This selector will be dynamically replaced by the color generator. Don't put
+ * other properties here.
+ */
+[data-theme='light'] {
+  --ifm-color-primary: #3578e5; /*#25c2a0;*/
+  --ifm-color-primary-dark: #1d68e1; /*rgb(33, 175, 144);*/
+  --ifm-color-primary-darker: #1b62d4; /*rgb(31, 165, 136);*/
+  --ifm-color-primary-darkest: #1751af; /*rgb(26, 136, 112);*/
+  --ifm-color-primary-light: #4e89e8; /*rgb(70, 203, 174);*/
+  --ifm-color-primary-lighter: #5a91ea; /*rgb(102, 212, 189);*/
+  --ifm-color-primary-lightest: #80aaef; /*rgb(146, 224, 208);*/
+  --ifm-code-font-size: 90%; /*95%;*/
+}
+
+/*
+ * This selector will be dynamically replaced by the color generator. Don't put
+ * other properties here.
+ */
+[data-theme='dark'] {
+  --ifm-color-primary: #3578e5; /*#25c2a0;*/
+  --ifm-color-primary-dark: #1d68e1; /*rgb(33, 175, 144);*/
+  --ifm-color-primary-darker: #1b62d4; /*rgb(31, 165, 136);*/
+  --ifm-color-primary-darkest: #1751af; /*rgb(26, 136, 112);*/
+  --ifm-color-primary-light: #4e89e8; /*rgb(70, 203, 174);*/
+  --ifm-color-primary-lighter: #5a91ea; /*rgb(102, 212, 189);*/
+  --ifm-color-primary-lightest: #80aaef; /*rgb(146, 224, 208);*/
+  --ifm-code-font-size: 90%; /*95%;*/
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link::before {
   content: '';
-  display: block;
-  width: 0;
-  height: 2px;
-  margin-top: -2px;
-  background: currentColor;
-  transition: width .3s;
-}
-
-.fancy-link:hover::after {
-  width: 100%;
-}
-
-
-/* ===== ONE-OFFS ===== */
-.sm {
-  font-size: .8rem;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.ital {
-  font-style: italic;
-}
-
-.padding-top-10 {
-  padding-top: 10px;
-}
-
-.updated {
-  font-size: .9rem;
-}
-
-.border {
-  border: 1px solid var(--border-dark);
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 6px;
-}
-
-.background {
-  background-color: var(--background-light)
-}
-
-
-/* ===== TABLES ===== */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 2rem auto 2rem 0;
-
-  text-align: left;
-}
-
-td, th {
-  padding: .25rem .75rem;
-}
-
-th {
-  color: var(--heading-normal);
-}
-
-tr {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-/* tablesorter styling */
-th.tablesorter-header {
-  min-width: 75px;
-}
-
-th.tablesorter-header:focus {
-  outline: none;
-}
-
-.tablesorter-header-inner::after {
-  font-family: var(--fa);
-  padding-left: 10px;
-  color: var(--text-link);
-}
-
-.tablesorter-headerAsc .tablesorter-header-inner::after {
-  content: "\f0d7";
-}
-
-.tablesorter-headerDesc .tablesorter-header-inner::after {
-  content: "\f0d8"
-}
-
-/* ===== CONTRIBUTORS LIST ===== */
-
-div.article-info-container {
-  font-size: .9rem;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.article-info-container > div {
+  width: 24px;
+  height: 24px;
   display: flex;
-}
-
-.article-info-container > div > *:not(:last-child), .article-info-container > div:not(:last-child) {
-  margin-right: 1rem;
-}
-
-div.contributor-list svg {
-  margin-right: .25rem;
-}
-
-/* ===== CONTRIBUTORS ===== */
-
-div.contributor-title {
-  font-size: 1.2rem;
-}
-
-div.contributor.icons {
-  font-size: 2rem;
-  padding-bottom: 1.5rem;
-  padding-top: .25rem;
-}
-
-div.contributor.icons a {
-  margin-right: .5rem;
-  color: var(--text-light);
-}
-
-.contributor.icons a:hover {
-  color: var(--text-link);
-}
-
-div.contributions {
-  margin-top: 1.5rem;
-}
-
-div.contributions ul {
-  padding-left: 0;
-  list-style-type: none;
-  margin-right: 5px;
-}
-
-div.contributions ul > li {
-  padding-bottom: .5rem;
-}
-
-/* ===== FEEDBACK BUTTONS ===== */
-
-.feedback-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  margin-top: 4rem;
-  border-top: 1px solid var(--border-light);
-  padding-top: .25rem;
-}
-
-.feedback-container > .feedback.inline-header {
-  margin-top: 4px;
-  color: var(--heading-blue);
-}
-
-.feedback-container > *:not(:last-child) {
-  margin-right: 2rem;
-}
-
-.feedback.button a {
-  color: unset;
-}
-
-.slackin {
-  align-self: center;
-  padding: unset;
-  margin-bottom: -0.5rem;
-  margin-left: auto;
-}
-
-.feedback.button.edit {
-  color: var(--logz-logo-normal);
-}
-
-.feedback.button.issue {
-  color: rgb(var(--app-orange-40));
-}
-
-.feedback.button svg {
-  margin-bottom: -2px;
-  margin-right: 1px;
-  fill: currentColor;
-}
-
-/* ===== RELATED LINKS ===== */
-
-div.related-links-container div {
-  margin-bottom: 2rem;
-  font-size: .8rem;
-}
-
-div.related-links-container ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-div.related-links-container span {
-  font-weight: 700;
-  color: var(--heading-normal);
-}
-
-/* ===== ACCORDIONS & TABS ===== */
-
-details {
-  background-color: var(--background-very-light);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  padding: .4rem 1rem;
-  margin-bottom: 5px;
-}
-
-details[open] > summary {
-  border-bottom: 3px solid currentColor;
-  font-weight: 600;
-}
-
-details > summary:hover {
-  font-weight: 600;
-}
-
-summary {
-  padding-left: .7rem;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-summary > p {
-  display: inline-block;
-  color: var(--heading-normal);
-  margin: unset;
-}
-
-.branching-container {
-  width: 100%;
-}
-
-.branching-tabs {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: 50px 0 0 0;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+[data-theme='dark'] .header-github-link::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.footer--dark {
+  --ifm-footer-background-color: #2b3137;
+}
+
+.unique-tabs .tabs__item {
+  line-height: 16px;
+  margin-right: 8px;
+}
+
+.unique-tabs .tabs__item--active {
+  border: 0;
+  color: #fff;
+  border-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-tabs-color-active);
+}
+
+[data-theme='light'] .themedDocusaurus [fill='#0000FF'] {
+  fill: blue;
+}
+
+[data-theme='dark'] .themedDocusaurus [fill='#0000FF'] {
+  fill: blue;
+}
+
+[data-theme='light'] .DocSearch {
+  /* --docsearch-primary-color: var(--ifm-color-primary); */
+  /* --docsearch-text-color: var(--ifm-font-color-base); */
+  --docsearch-muted-color: var(--ifm-color-emphasis-700);
+  --docsearch-container-background: rgb(94 100 112 / 70%);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-color-secondary);
+  --docsearch-searchbox-focus-background: var(--ifm-color-white);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-white);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-color-white);
+}
+
+[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgb(47 55 69 / 70%);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-background-color);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-focus-background: var(--ifm-color-black);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-key-gradient: linear-gradient(
+    -26.5deg,
+    var(--ifm-color-emphasis-200) 0%,
+    var(--ifm-color-emphasis-100) 100%
+  );
+}
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+    var(--site-primary-hue-saturation) 85%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+    var(--site-primary-hue-saturation) 95%
+  );
+  background: repeating-linear-gradient(
+    35deg,
+    var(--site-announcement-bar-stripe-color1),
+    var(--site-announcement-bar-stripe-color1) 20px,
+    var(--site-announcement-bar-stripe-color2) 10px,
+    var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
+}
+
+.screen-reader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
   padding: 0;
-  background: none;
-  list-style-type: none;
-  border-bottom: 2px solid var(--border-very-light);
-}
-
-ol .branching-tabs {
-  margin-top: 25px;
-}
-
-.branching-tabs li {
-  display: inline-block;
-  margin-bottom: 2px;
-  color: var(--tab-inactive);
-}
-
-.branching-tabs li.active, .branching-tabs li:hover {
-  border-bottom: 4px solid currentColor;
-  margin-bottom: -2px;
-}
-
-.branching-tabs li.active {
-  font-weight: 400;
-  color: var(--text-normal);
-}
-
-.branching-tabs li > a {
-  color: unset;
-  display: block;
-  margin: 0;
-  padding: 0px 24px 1px 24px;
-}
-
-.branching-container > div {
-  padding-top: 12px;
-}
-
-/* ===== LOG SHIPPING PAGES ===== */
-
-#on-this-page-toc {
-  background-color: var(--background-very-light);
-  border: 1px solid var(--border-very-light);
-  border-radius: 5px;
-  padding-left: 15px;
-}
-
-#on-this-page-toc div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  padding: 0;
-  margin-top: 1rem;
-  line-height: 1.25rem;
-}
-
-#on-this-page-toc div a {
-  display: block;
-  font-size: 1rem;
-  margin-right: 20px;
-  margin-bottom: 15px;
-  cursor: pointer;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
-.breadcrumbs {
-  margin-bottom: 1rem;
-  font-size: .9rem;
-  color: var(--text-link-gray);
+[data-theme='light'] img[src$='#gh-dark-mode-only'],
+[data-theme='dark'] img[src$='#gh-light-mode-only'] {
+  display: none;
 }
 
-.breadcrumbs span:not(:last-child)::after {
-  content: " > ";
+/* Used to test CSS insertion order */
+.test-marker-site-custom-css-unique-rule {
+  content: 'site-custom-css-unique-rule';
 }
 
-/* ===== COPY BUTTON ===== */
-
-div.highlighter-rouge {
+.video-container {
   position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
 }
 
-.copy-btn {
-  width: fit-content;
-  height: fit-content;
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  padding: 1px;
-  margin: 0;
-
-  opacity: .25;
-  transition: opacity .5s ease;
-}
-
-.copy-btn::before {
-  font-size: .75rem;
-  font-weight: 700;
-  padding: 0 4px;
-  background-color: var(--text-normal);
-  color: white;
-  margin-top: -3px;
-  border-radius: 6px;
-}
-
-.copy-btn:hover {
-  opacity: 1;
+.yt-lite > .lty-playbtn {
   cursor: pointer;
+  border: 0;
 }
 
-.copy-btn:hover::before {
-  content: "Copy";
-}
-
-.copy-btn:hover::before {
-  content: "Copy";
+.dropdown-separator {
+  margin: 0.3rem 0;
 }
 
-.copy-btn.copied {
-  opacity: 1;
+.dropdown-archived-versions {
+  font-size: 0.875rem;
+  padding: 0.2rem 0.5rem;
 }
 
-.copy-btn.copied::before {
-  content: "Copied!";
-}
-
-/* ===== GITHUB AVATARS ===== */
-
-.avatar.avatar-small {
-  display: inline-block;
-  margin: 0 0 0 0;
-  vertical-align: middle;
-  border-radius: 50%;
-}
-
-h1 .avatar.avatar-small {
-  margin-right: .75rem;
-  margin-top: -4px;
-}
-
-.contributor-list .avatar.avatar-small {
-  margin: 0 1px;
-}
-
-/* ===== OPEN SOURCE BUTTON ===== */
-
-.open-source-btn {
-  color: var(--text-normal);
-  border: 1px solid silver;
-  width: fit-content;
-  border-radius: 3px;
-  padding: 0px 4px;
-  font-size: .85rem;
-  font-weight: 600;
-  background: linear-gradient(to bottom, white, var(--background-light));
-  line-height: 1;
-}
-
-.open-source-btn:hover {
-  background: linear-gradient(to bottom, var(--background-very-light), silver);
-}
-
-.rss-button a {
-  color: orange;
-  border: 1px solid currentColor;
-  font-weight: 700;
-  width: fit-content;
-  padding: 0 5px;
-  border-radius: 6px;
-  margin: 0;
-}
-
-.rss-button a:hover {
-  color: white;
-  background-color: orange;
-  border: 1px solid currentColor;
-}
-
-
-/* ===== FPO - IMAGE PLACEHOLDERS ===== */
-.fpo {
-  display: flex;
-  max-width: 80%;
-  height: 100px;
-  margin: 1.5rem auto;
-  border: 1px solid var(--border-dark);
-  border-radius: 2px;
-  background-color: var(--background-light);
-  justify-content: center;
-}
-
-.fpo::after {
-  content: "[ You really should do something about this placeholder. ]";
-  justify-self: center;
-  align-self: center;
-  text-align: center;
-  color: var(--text-code);
-  font-weight: 700;
-  font-size: .9rem;
-}
-
-.fpo.fpo-1::after {
-  content: "[ Nothing lasts forever, including this placeholder. ]";
-}
-
-.fpo.fpo-2::after {
-  content: "[ You are irreplacable. This placeholder, though... ]";
-}
-
-.fpo.fpo-3::after {
-  content: "[ A picture is worth a thousand words. This placeholder... not so much. ]";
-}
-
-.fpo.fpo-4::after {
-  content: "[ Picture this: A rustic hunting lodge, my latest kill roasting over the fire, and this placeholder isn't just a placeholder. ]"
+.code-block-error-line {
+  background-color: #ff000020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #ff000080;
 }
 
 /* ===== Split line ===== */
@@ -666,7 +222,8 @@ h1 .avatar.avatar-small {
   border-top-width: 1px;
 }
 
-/* ===== try new sidebar headers ==== */
-.section-title.tutorial > div >a::before {
-  background-image: url(../../static/img/alert.svg);
+a, a:hover {
+  color: var(--text-link);
+  text-decoration: none;
+  color:#2c8eb8
 }
diff --git a/src/css/default-fonts-and-colors.scss b/src/css/default-fonts-and-colors.scss
new file mode 100644
index 00000000..e804bf50
--- /dev/null
+++ b/src/css/default-fonts-and-colors.scss
@@ -0,0 +1,240 @@
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBM-Plex-Sans-300.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBM-Plex-Sans-400.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 400;
+  font-display: swap;
+}
+
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBM-Plex-Sans-500.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBM-Plex-Sans-600.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('/fonts/IBM-Plex-Mono-300.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('/fonts/IBM-Plex-Mono-600.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('/fonts/IBM-Plex-Mono-normal.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono Regular';
+  src: url('/fonts/IBM-Plex-Mono-Regular.woff2') format('woff2');
+
+  /* Super Modern Browsers */
+  font-weight: normal;
+  font-display: swap;
+}
+
+/* You can override the default Infima variables here. */
+
+:root {
+  /* Custom Variables */
+  --color-gray-0: #ffffff;
+  --color-gray-4: #f3f5f7;
+  --color-gray-4-alpha-04: rgba(243, 245, 247, 0.4);
+  --color-gray-8: #e7ebef;
+  --color-gray-12: #dce2e8;
+  --color-gray-16: #cfd8df;
+  //new
+  --color-gray-20: #c2d0d8;
+  --color-gray-24: #b6c6ce;
+  --color-gray-28: #a9bcc4;
+  --color-gray-32: #9db2ba;
+  --color-gray-36: #91a8b0;
+  --color-gray-40: #849ea6;
+  --color-gray-44: #78949c;
+  --color-gray-48: #6c8a92;
+  --color-gray-52: #608088;
+  --color-gray-56: #54767e;
+  --color-gray-60: #486c74;
+  --color-gray-64: #3c626a;
+  --color-gray-68: #305860;
+  --color-gray-72: #244e56;
+  //end new
+  --color-gray-74: #344658;
+  --color-gray-78: #2c3b4b;
+  --color-gray-82: #23303d;
+  --color-gray-86: #1c262f;
+  --color-gray-86-alpha-04: rgba(28, 38, 47, 0.4);
+  --color-gray-90: #141c22;
+
+  /* Docusaurus Specific variables */
+  --ifm-color-primary: #0b89d0;
+  --ifm-color-primary-dark: #0079bd;
+  --ifm-color-primary-darker: #005c8f;
+  --ifm-color-primary-darkest: #00324e;
+  --ifm-color-primary-light: #1699e2;
+  --ifm-color-primary-lighter: #35b6ff;
+  --ifm-color-primary-lightest: #77ceff;
+  --ifm-color-primary-contrast-background: #e1f4ff;
+  --ifm-color-primary-contrast-foreground: #00324e;
+  --ifm-color-secondary: #e0e7ee;
+  --ifm-color-secondary-dark: #d5dee5;
+  --ifm-color-secondary-darker: #c3cdd6;
+  --ifm-color-secondary-darkest: #b1bcc7;
+  --ifm-color-secondary-light: #ebf1f6;
+  --ifm-color-secondary-lighter: #f2f7fb;
+  --ifm-color-secondary-lightest: #f8fcff;
+  --ifm-color-secondary-contrast-background: #ebf1f6;
+  --ifm-color-secondary-contrast-foreground: #1b2738;
+  --ifm-color-success: #46b486;
+  --ifm-color-success-dark: #37a476;
+  --ifm-color-success-darker: #02864f;
+  --ifm-color-success-darkest: #026d40;
+  --ifm-color-success-light: #54c596;
+  --ifm-color-success-lighter: #66d0a3;
+  --ifm-color-success-lightest: #77dbb1;
+  --ifm-color-success-contrast-background: #ddfaed;
+  --ifm-color-success-contrast-foreground: #003921;
+  --ifm-color-info: #5898d2;
+  --ifm-color-info-dark: #478bca;
+  --ifm-color-info-darker: #2771b6;
+  --ifm-color-info-darkest: #0b5599;
+  --ifm-color-info-light: #6aa4db;
+  --ifm-color-info-lighter: #7bb4e8;
+  --ifm-color-info-lightest: #8cc3f5;
+  --ifm-color-info-contrast-background: #e3f2ff;
+  --ifm-color-info-contrast-foreground: #00315f;
+  --ifm-color-warning: #dd9833;
+  --ifm-color-warning-dark: #c78017;
+  --ifm-color-warning-darker: #a66401;
+  --ifm-color-warning-darkest: #794900;
+  --ifm-color-warning-light: #f2b14f;
+  --ifm-color-warning-lighter: #f6ba61;
+  --ifm-color-warning-lightest: #f9c374;
+  --ifm-color-warning-contrast-background: #ffefd8;
+  --ifm-color-warning-contrast-foreground: #3e2500;
+  --ifm-color-danger: #e66d6d;
+  --ifm-color-danger-dark: #d95c5c;
+  --ifm-color-danger-darker: #c64242;
+  --ifm-color-danger-darkest: #a02929;
+  --ifm-color-danger-light: #f47e7e;
+  --ifm-color-danger-lighter: #f88e8e;
+  --ifm-color-danger-lightest: #fc9f9f;
+  --ifm-color-danger-contrast-background: #ffe8e8;
+  --ifm-color-danger-contrast-foreground: #6a0808;
+
+  --ifm-color-gray-100: var(--color-gray-12);
+  /*--ifm-color-gray-200: #EBF1F6;
+  --ifm-color-gray-300: #D5DEE5;
+  --ifm-color-gray-400: #B1BCC7;
+  --ifm-color-gray-500: #909DA6;
+  --ifm-color-gray-600: #74818A;
+  --ifm-color-gray-700: #616D75;
+  --ifm-color-gray-800: #404955; */
+  --ifm-color-gray-900: var(--color-gray-90);
+
+  /* --ifm-navbar-background-color; */
+  /* --ifm-background-color */
+  --ifm-heading-color: var(--color-gray-74);
+  --ifm-footer-background-color: var(--color-gray-8);
+  --ifm-color-content-secondary: #616d75;
+  --ifm-link-color: #0676c8;
+  --ifm-menu-color: var(--ifm-color-content);
+  --ifm-menu-color-active: var(--ifm-color-content);
+  --ifm-toc-link-color: var(--ifm-color-content);
+
+  --ifm-table-stripe-background: var(--color-gray-4-alpha-04);
+  --ifm-pre-background: var(--color-gray-4);
+  --ifm-code-background: var(--color-gray-4);
+  --ifm-code-font-size: 0.875rem; /* 14px */
+
+  /* --ifm-pre-color: inherit; */
+  --ifm-global-shadow-lw: 0px 2px 6px rgba(0, 0, 0, 0.2);
+  --ifm-global-shadow-md: 0px 4px 14px rgba(0, 0, 0, 0.16);
+  --ifm-global-shadow-tl: 0px 10px 30px rgba(0, 0, 0, 0.16);
+
+  --ifm-global-radius: 0.25rem;
+
+  --doc-sidebar-width: 320px !important;
+  --ifm-navbar-height: 72px !important;
+
+  --ifm-font-family-base: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
+  sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol';
+  --ifm-font-family-monospace: 'IBM Plex Mono Regular', 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+  --ifm-font-size-base: 16px;
+  --ifm-line-height-base: 1.5; /* 150% */
+  --ifm-font-weight-light: 300;
+  --ifm-font-weight-normal: 400;
+  --ifm-font-weight-semibold: 500;
+  --ifm-font-weight-bold: 600;
+
+  --ifm-heading-line-height: 1.25;
+  --ifm-h1-font-size: 2.5rem; /* 40px */
+  --ifm-h2-font-size: 2rem; /* 32px */
+  --ifm-h3-font-size: 1.5rem; /* 24px */
+  --ifm-h4-font-size: 1.25rem; /* 20px */
+  --ifm-h5-font-size: 1rem; /* 16px */
+  --ifm-h6-font-size: 0.875rem; /* 14px */
+  --ifm-small-font-size: 0.75rem; /* 12px */
+
+  --ifm-heading-font-weight: var(--ifm-font-weight-semibold);
+
+  --ifm-footer-padding-vertical: 3rem;
+}
+
+/* Dark Mode Styles */
+html[data-theme='dark'] {
+  --ifm-link-color: #48ADF6;
+  --ifm-heading-color: var(--color-gray-12);
+  --ifm-navbar-background-color: var(--color-gray-82);
+  --ifm-background-color: var(--color-gray-90);
+  --ifm-hero-background-color: var(--ifm-background-color);
+  --ifm-table-stripe-background: var(--color-gray-86-alpha-04);
+  --ifm-pre-background: var(--color-gray-86);
+  --ifm-code-background: var(--color-gray-86);
+  --ifm-dropdown-background-color: var(--color-gray-78);
+  --ifm-card-background-color: var(--color-gray-82);
+  --ifm-footer-background-color: var(--color-gray-82);
+  --collapse-button-bg-color-dark: var(--color-gray-86);
+  --docsearch-searchbox-background: var(--color-gray-90) !important;
+  --docsearch-searchbox-focus-background: var(--color-gray-86) !important;
+}
diff --git a/yarn.lock b/yarn.lock
index 7c82b62f..6635f323 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5613,6 +5613,11 @@ dns-packet@^5.2.2:
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
+docusaurus-plugin-hotjar@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-hotjar/-/docusaurus-plugin-hotjar-0.0.2.tgz#cd79d4c446ff57872041abeedae811946581e020"
+  integrity sha512-Jsdxa6k4YQm4SBiY5mv9h/6sKUrQs6lC6mRoPUfjiPVtnhURE3d0dj4Vnrpy/tRVSAbywAqA0F/PGn5RKHtVaw==
+
 docusaurus-plugin-includes@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/docusaurus-plugin-includes/-/docusaurus-plugin-includes-1.1.4.tgz#5c18f66f299b4e02d1eb454d8123c2d160ee0c33"

From 9d3ef741ab3146fd025b87be500964ad60142a62 Mon Sep 17 00:00:00 2001
From: Doron-Bargo <62555360+Doron-Bargo@users.noreply.github.com>
Date: Tue, 9 Jan 2024 22:26:24 +0200
Subject: [PATCH 2/2] remove unneeded files

---
 src/css/bck_custom.css                | 674 --------------------------
 src/css/default-fonts-and-colors.scss | 240 ---------
 2 files changed, 914 deletions(-)
 delete mode 100644 src/css/bck_custom.css
 delete mode 100644 src/css/default-fonts-and-colors.scss

diff --git a/src/css/bck_custom.css b/src/css/bck_custom.css
deleted file mode 100644
index de1ff726..00000000
--- a/src/css/bck_custom.css
+++ /dev/null
@@ -1,674 +0,0 @@
-/* ===== FONT IMPORTS ===== */
-/* Roboto (body) and Titillium (heading) 
-@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');
- @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap'); 
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i'); */
-
-@use 'default-fonts-and-colors';
-
-/* ===== CSS IMPORTS ===== */
-
-/* If you need to import more css files, put them at the bottom of the list. */
-
-/* ===== PAGE LAYOUT ===== */
-
-body {
-  padding: 0;
-  margin: 0 auto;
-}
-
-.test {
-  color: red !important;
-}
-
-div.big-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  align-content: flex-start;
-}
-
-.title-container {
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-div.body-container {
-  max-width: 850px;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 25px;
-  padding-right: 25px;
-  padding-bottom: 200px;
-}
-
-div.card-container {
-  max-width: 1000px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-bottom: 50px;
-}
-
-div.body-container, div.card-container {
-  vertical-align: top;
-  margin-top: 2rem;
-  justify-self: start;
-}
-
-/* media queries */
-
-@media (max-width: 630px) {
-  #log-in {
-    display: none;
-  }
-}
-
-@media (max-width: 975px) {
-/* toc hides at this size */
-
-  header, footer {
-    padding: 0 10px;
-  }
-
-  div.site-badge {
-    min-width: 145px !important;
-  }
-
-  div#toc-collapse-btn {
-    display: inline-block !important;
-  }
-
-  .toc-visibility {
-    display: none !important;
-  }
-
-  div.toc-container {
-    position: fixed;
-    width: 300px;
-    display: block;
-    top: 25px;
-    left: 0;
-    bottom: 0;
-    overflow-y: auto;
-    z-index: 50;
-    }
-
-  div.site-badge img.logz-logo {
-    display: none;
-  }
-
-  div.site-badge img.logz-symbol {
-    display: inline !important;
-  }
-}
-
-@media (max-width: 1210px) {
-  nav.site-links {
-    display: none;
-  }
-
-  nav.site-actions {
-    padding: 0;
-  }
-}
-
-/* ===== BASE STYLES ===== */
-
-html {
-  font-size: 16px;
-}
-
-body {
-  font-family: var(--body-font);
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.7rem;
-  color: var(--text-normal);
-}
-
-p {
-  margin-bottom: 1.25rem;
-  margin-top: 1.25rem;
-}
-
-code, pre {
-  font-family: var(--mono-font);
-  font-size: .8rem;
-  color:#e53935;
-  background-color: #f6f8fa;
-}
-
-
-
-main.page-content img, main.page-content video, .post-content iframe {
-  display: block;
-  max-width: 90%;
-  margin: 1.5rem auto;
-  border: 1px solid var(--border-very-light);
-  border-radius: 2px;
-}
-
-main {
-  margin-top: 5px;
-  border-top: 1px solid var(--border-very-light);
-}
-
-.btn-img, .override.btn-img, p.override.btn-img img {
-  margin-left: 0;
-  padding-left: 0;
-  border: none;
-  border-radius: unset;
-}
-
-ol img, ol video {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.no-border {
-  border: none !important;
-}
-
-
-a, a:hover {
-  color: var(--text-link);
-  text-decoration: none;
-  color:#2c8eb8
-}
-
-a.no-link {
-  color: var(--text-normal);
-  cursor: text;
-}
-
-svg.svg-inline--fa, i.li {
-  /* add some breathing room to inline font awesome icons */
-  margin-left: .1rem;
-  margin-right: .1rem;
-}
-
-.fancy-link::after {
-  content: '';
-  display: block;
-  width: 0;
-  height: 2px;
-  margin-top: -2px;
-  background: currentColor;
-  transition: width .3s;
-}
-
-.fancy-link:hover::after {
-  width: 100%;
-}
-
-
-/* ===== ONE-OFFS ===== */
-.sm {
-  font-size: .8rem;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.ital {
-  font-style: italic;
-}
-
-.padding-top-10 {
-  padding-top: 10px;
-}
-
-.updated {
-  font-size: .9rem;
-}
-
-.border {
-  border: 1px solid var(--border-dark);
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 6px;
-}
-
-.background {
-  background-color: var(--background-light)
-}
-
-
-/* ===== TABLES ===== */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 2rem auto 2rem 0;
-
-  text-align: left;
-}
-
-td, th {
-  padding: .25rem .75rem;
-}
-
-th {
-  color: var(--heading-normal);
-}
-
-tr {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-/* tablesorter styling */
-th.tablesorter-header {
-  min-width: 75px;
-}
-
-th.tablesorter-header:focus {
-  outline: none;
-}
-
-.tablesorter-header-inner::after {
-  font-family: var(--fa);
-  padding-left: 10px;
-  color: var(--text-link);
-}
-
-.tablesorter-headerAsc .tablesorter-header-inner::after {
-  content: "\f0d7";
-}
-
-.tablesorter-headerDesc .tablesorter-header-inner::after {
-  content: "\f0d8"
-}
-
-/* ===== CONTRIBUTORS LIST ===== */
-
-div.article-info-container {
-  font-size: .9rem;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.article-info-container > div {
-  display: flex;
-}
-
-.article-info-container > div > *:not(:last-child), .article-info-container > div:not(:last-child) {
-  margin-right: 1rem;
-}
-
-div.contributor-list svg {
-  margin-right: .25rem;
-}
-
-/* ===== CONTRIBUTORS ===== */
-
-div.contributor-title {
-  font-size: 1.2rem;
-}
-
-div.contributor.icons {
-  font-size: 2rem;
-  padding-bottom: 1.5rem;
-  padding-top: .25rem;
-}
-
-div.contributor.icons a {
-  margin-right: .5rem;
-  color: var(--text-light);
-}
-
-.contributor.icons a:hover {
-  color: var(--text-link);
-}
-
-div.contributions {
-  margin-top: 1.5rem;
-}
-
-div.contributions ul {
-  padding-left: 0;
-  list-style-type: none;
-  margin-right: 5px;
-}
-
-div.contributions ul > li {
-  padding-bottom: .5rem;
-}
-
-/* ===== FEEDBACK BUTTONS ===== */
-
-.feedback-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  margin-top: 4rem;
-  border-top: 1px solid var(--border-light);
-  padding-top: .25rem;
-}
-
-.feedback-container > .feedback.inline-header {
-  margin-top: 4px;
-  color: var(--heading-blue);
-}
-
-.feedback-container > *:not(:last-child) {
-  margin-right: 2rem;
-}
-
-.feedback.button a {
-  color: unset;
-}
-
-.slackin {
-  align-self: center;
-  padding: unset;
-  margin-bottom: -0.5rem;
-  margin-left: auto;
-}
-
-.feedback.button.edit {
-  color: var(--logz-logo-normal);
-}
-
-.feedback.button.issue {
-  color: rgb(var(--app-orange-40));
-}
-
-.feedback.button svg {
-  margin-bottom: -2px;
-  margin-right: 1px;
-  fill: currentColor;
-}
-
-/* ===== RELATED LINKS ===== */
-
-div.related-links-container div {
-  margin-bottom: 2rem;
-  font-size: .8rem;
-}
-
-div.related-links-container ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-div.related-links-container span {
-  font-weight: 700;
-  color: var(--heading-normal);
-}
-
-/* ===== ACCORDIONS & TABS ===== */
-
-details {
-  background-color: var(--background-very-light);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  padding: .4rem 1rem;
-  margin-bottom: 5px;
-}
-
-details[open] > summary {
-  border-bottom: 3px solid currentColor;
-  font-weight: 600;
-}
-
-details > summary:hover {
-  font-weight: 600;
-}
-
-summary {
-  padding-left: .7rem;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-summary > p {
-  display: inline-block;
-  color: var(--heading-normal);
-  margin: unset;
-}
-
-.branching-container {
-  width: 100%;
-}
-
-.branching-tabs {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: 50px 0 0 0;
-  padding: 0;
-  background: none;
-  list-style-type: none;
-  border-bottom: 2px solid var(--border-very-light);
-}
-
-ol .branching-tabs {
-  margin-top: 25px;
-}
-
-.branching-tabs li {
-  display: inline-block;
-  margin-bottom: 2px;
-  color: var(--tab-inactive);
-}
-
-.branching-tabs li.active, .branching-tabs li:hover {
-  border-bottom: 4px solid currentColor;
-  margin-bottom: -2px;
-}
-
-.branching-tabs li.active {
-  font-weight: 400;
-  color: var(--text-normal);
-}
-
-.branching-tabs li > a {
-  color: unset;
-  display: block;
-  margin: 0;
-  padding: 0px 24px 1px 24px;
-}
-
-.branching-container > div {
-  padding-top: 12px;
-}
-
-/* ===== LOG SHIPPING PAGES ===== */
-
-#on-this-page-toc {
-  background-color: var(--background-very-light);
-  border: 1px solid var(--border-very-light);
-  border-radius: 5px;
-  padding-left: 15px;
-}
-
-#on-this-page-toc div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  padding: 0;
-  margin-top: 1rem;
-  line-height: 1.25rem;
-}
-
-#on-this-page-toc div a {
-  display: block;
-  font-size: 1rem;
-  margin-right: 20px;
-  margin-bottom: 15px;
-  cursor: pointer;
-}
-
-.breadcrumbs {
-  margin-bottom: 1rem;
-  font-size: .9rem;
-  color: var(--text-link-gray);
-}
-
-.breadcrumbs span:not(:last-child)::after {
-  content: " > ";
-}
-
-/* ===== COPY BUTTON ===== */
-
-div.highlighter-rouge {
-  position: relative;
-}
-
-.copy-btn {
-  width: fit-content;
-  height: fit-content;
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  padding: 1px;
-  margin: 0;
-
-  opacity: .25;
-  transition: opacity .5s ease;
-}
-
-.copy-btn::before {
-  font-size: .75rem;
-  font-weight: 700;
-  padding: 0 4px;
-  background-color: var(--text-normal);
-  color: white;
-  margin-top: -3px;
-  border-radius: 6px;
-}
-
-.copy-btn:hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.copy-btn:hover::before {
-  content: "Copy";
-}
-
-.copy-btn:hover::before {
-  content: "Copy";
-}
-
-.copy-btn.copied {
-  opacity: 1;
-}
-
-.copy-btn.copied::before {
-  content: "Copied!";
-}
-
-/* ===== GITHUB AVATARS ===== */
-
-.avatar.avatar-small {
-  display: inline-block;
-  margin: 0 0 0 0;
-  vertical-align: middle;
-  border-radius: 50%;
-}
-
-h1 .avatar.avatar-small {
-  margin-right: .75rem;
-  margin-top: -4px;
-}
-
-.contributor-list .avatar.avatar-small {
-  margin: 0 1px;
-}
-
-/* ===== OPEN SOURCE BUTTON ===== */
-
-.open-source-btn {
-  color: var(--text-normal);
-  border: 1px solid silver;
-  width: fit-content;
-  border-radius: 3px;
-  padding: 0px 4px;
-  font-size: .85rem;
-  font-weight: 600;
-  background: linear-gradient(to bottom, white, var(--background-light));
-  line-height: 1;
-}
-
-.open-source-btn:hover {
-  background: linear-gradient(to bottom, var(--background-very-light), silver);
-}
-
-.rss-button a {
-  color: orange;
-  border: 1px solid currentColor;
-  font-weight: 700;
-  width: fit-content;
-  padding: 0 5px;
-  border-radius: 6px;
-  margin: 0;
-}
-
-.rss-button a:hover {
-  color: white;
-  background-color: orange;
-  border: 1px solid currentColor;
-}
-
-
-/* ===== FPO - IMAGE PLACEHOLDERS ===== */
-.fpo {
-  display: flex;
-  max-width: 80%;
-  height: 100px;
-  margin: 1.5rem auto;
-  border: 1px solid var(--border-dark);
-  border-radius: 2px;
-  background-color: var(--background-light);
-  justify-content: center;
-}
-
-.fpo::after {
-  content: "[ You really should do something about this placeholder. ]";
-  justify-self: center;
-  align-self: center;
-  text-align: center;
-  color: var(--text-code);
-  font-weight: 700;
-  font-size: .9rem;
-}
-
-.fpo.fpo-1::after {
-  content: "[ Nothing lasts forever, including this placeholder. ]";
-}
-
-.fpo.fpo-2::after {
-  content: "[ You are irreplacable. This placeholder, though... ]";
-}
-
-.fpo.fpo-3::after {
-  content: "[ A picture is worth a thousand words. This placeholder... not so much. ]";
-}
-
-.fpo.fpo-4::after {
-  content: "[ Picture this: A rustic hunting lodge, my latest kill roasting over the fire, and this placeholder isn't just a placeholder. ]"
-}
-
-/* ===== Split line ===== */
-
-.releaseSidebarHeading {
-  @apply !mt-2 border-t-secondary-700 pt-1;
-  border-top-style: solid;
-  border-top-width: 1px;
-}
-
-/* ===== try new sidebar headers ==== */
-.section-title.tutorial > div >a::before {
-  background-image: url(../../static/img/alert.svg);
-}
diff --git a/src/css/default-fonts-and-colors.scss b/src/css/default-fonts-and-colors.scss
deleted file mode 100644
index e804bf50..00000000
--- a/src/css/default-fonts-and-colors.scss
+++ /dev/null
@@ -1,240 +0,0 @@
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('/fonts/IBM-Plex-Sans-300.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 300;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('/fonts/IBM-Plex-Sans-400.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 400;
-  font-display: swap;
-}
-
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('/fonts/IBM-Plex-Sans-500.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 500;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('/fonts/IBM-Plex-Sans-600.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 600;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  src: url('/fonts/IBM-Plex-Mono-300.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 300;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  src: url('/fonts/IBM-Plex-Mono-600.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: 600;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  src: url('/fonts/IBM-Plex-Mono-normal.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono Regular';
-  src: url('/fonts/IBM-Plex-Mono-Regular.woff2') format('woff2');
-
-  /* Super Modern Browsers */
-  font-weight: normal;
-  font-display: swap;
-}
-
-/* You can override the default Infima variables here. */
-
-:root {
-  /* Custom Variables */
-  --color-gray-0: #ffffff;
-  --color-gray-4: #f3f5f7;
-  --color-gray-4-alpha-04: rgba(243, 245, 247, 0.4);
-  --color-gray-8: #e7ebef;
-  --color-gray-12: #dce2e8;
-  --color-gray-16: #cfd8df;
-  //new
-  --color-gray-20: #c2d0d8;
-  --color-gray-24: #b6c6ce;
-  --color-gray-28: #a9bcc4;
-  --color-gray-32: #9db2ba;
-  --color-gray-36: #91a8b0;
-  --color-gray-40: #849ea6;
-  --color-gray-44: #78949c;
-  --color-gray-48: #6c8a92;
-  --color-gray-52: #608088;
-  --color-gray-56: #54767e;
-  --color-gray-60: #486c74;
-  --color-gray-64: #3c626a;
-  --color-gray-68: #305860;
-  --color-gray-72: #244e56;
-  //end new
-  --color-gray-74: #344658;
-  --color-gray-78: #2c3b4b;
-  --color-gray-82: #23303d;
-  --color-gray-86: #1c262f;
-  --color-gray-86-alpha-04: rgba(28, 38, 47, 0.4);
-  --color-gray-90: #141c22;
-
-  /* Docusaurus Specific variables */
-  --ifm-color-primary: #0b89d0;
-  --ifm-color-primary-dark: #0079bd;
-  --ifm-color-primary-darker: #005c8f;
-  --ifm-color-primary-darkest: #00324e;
-  --ifm-color-primary-light: #1699e2;
-  --ifm-color-primary-lighter: #35b6ff;
-  --ifm-color-primary-lightest: #77ceff;
-  --ifm-color-primary-contrast-background: #e1f4ff;
-  --ifm-color-primary-contrast-foreground: #00324e;
-  --ifm-color-secondary: #e0e7ee;
-  --ifm-color-secondary-dark: #d5dee5;
-  --ifm-color-secondary-darker: #c3cdd6;
-  --ifm-color-secondary-darkest: #b1bcc7;
-  --ifm-color-secondary-light: #ebf1f6;
-  --ifm-color-secondary-lighter: #f2f7fb;
-  --ifm-color-secondary-lightest: #f8fcff;
-  --ifm-color-secondary-contrast-background: #ebf1f6;
-  --ifm-color-secondary-contrast-foreground: #1b2738;
-  --ifm-color-success: #46b486;
-  --ifm-color-success-dark: #37a476;
-  --ifm-color-success-darker: #02864f;
-  --ifm-color-success-darkest: #026d40;
-  --ifm-color-success-light: #54c596;
-  --ifm-color-success-lighter: #66d0a3;
-  --ifm-color-success-lightest: #77dbb1;
-  --ifm-color-success-contrast-background: #ddfaed;
-  --ifm-color-success-contrast-foreground: #003921;
-  --ifm-color-info: #5898d2;
-  --ifm-color-info-dark: #478bca;
-  --ifm-color-info-darker: #2771b6;
-  --ifm-color-info-darkest: #0b5599;
-  --ifm-color-info-light: #6aa4db;
-  --ifm-color-info-lighter: #7bb4e8;
-  --ifm-color-info-lightest: #8cc3f5;
-  --ifm-color-info-contrast-background: #e3f2ff;
-  --ifm-color-info-contrast-foreground: #00315f;
-  --ifm-color-warning: #dd9833;
-  --ifm-color-warning-dark: #c78017;
-  --ifm-color-warning-darker: #a66401;
-  --ifm-color-warning-darkest: #794900;
-  --ifm-color-warning-light: #f2b14f;
-  --ifm-color-warning-lighter: #f6ba61;
-  --ifm-color-warning-lightest: #f9c374;
-  --ifm-color-warning-contrast-background: #ffefd8;
-  --ifm-color-warning-contrast-foreground: #3e2500;
-  --ifm-color-danger: #e66d6d;
-  --ifm-color-danger-dark: #d95c5c;
-  --ifm-color-danger-darker: #c64242;
-  --ifm-color-danger-darkest: #a02929;
-  --ifm-color-danger-light: #f47e7e;
-  --ifm-color-danger-lighter: #f88e8e;
-  --ifm-color-danger-lightest: #fc9f9f;
-  --ifm-color-danger-contrast-background: #ffe8e8;
-  --ifm-color-danger-contrast-foreground: #6a0808;
-
-  --ifm-color-gray-100: var(--color-gray-12);
-  /*--ifm-color-gray-200: #EBF1F6;
-  --ifm-color-gray-300: #D5DEE5;
-  --ifm-color-gray-400: #B1BCC7;
-  --ifm-color-gray-500: #909DA6;
-  --ifm-color-gray-600: #74818A;
-  --ifm-color-gray-700: #616D75;
-  --ifm-color-gray-800: #404955; */
-  --ifm-color-gray-900: var(--color-gray-90);
-
-  /* --ifm-navbar-background-color; */
-  /* --ifm-background-color */
-  --ifm-heading-color: var(--color-gray-74);
-  --ifm-footer-background-color: var(--color-gray-8);
-  --ifm-color-content-secondary: #616d75;
-  --ifm-link-color: #0676c8;
-  --ifm-menu-color: var(--ifm-color-content);
-  --ifm-menu-color-active: var(--ifm-color-content);
-  --ifm-toc-link-color: var(--ifm-color-content);
-
-  --ifm-table-stripe-background: var(--color-gray-4-alpha-04);
-  --ifm-pre-background: var(--color-gray-4);
-  --ifm-code-background: var(--color-gray-4);
-  --ifm-code-font-size: 0.875rem; /* 14px */
-
-  /* --ifm-pre-color: inherit; */
-  --ifm-global-shadow-lw: 0px 2px 6px rgba(0, 0, 0, 0.2);
-  --ifm-global-shadow-md: 0px 4px 14px rgba(0, 0, 0, 0.16);
-  --ifm-global-shadow-tl: 0px 10px 30px rgba(0, 0, 0, 0.16);
-
-  --ifm-global-radius: 0.25rem;
-
-  --doc-sidebar-width: 320px !important;
-  --ifm-navbar-height: 72px !important;
-
-  --ifm-font-family-base: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
-  sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol';
-  --ifm-font-family-monospace: 'IBM Plex Mono Regular', 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace;
-  --ifm-font-size-base: 16px;
-  --ifm-line-height-base: 1.5; /* 150% */
-  --ifm-font-weight-light: 300;
-  --ifm-font-weight-normal: 400;
-  --ifm-font-weight-semibold: 500;
-  --ifm-font-weight-bold: 600;
-
-  --ifm-heading-line-height: 1.25;
-  --ifm-h1-font-size: 2.5rem; /* 40px */
-  --ifm-h2-font-size: 2rem; /* 32px */
-  --ifm-h3-font-size: 1.5rem; /* 24px */
-  --ifm-h4-font-size: 1.25rem; /* 20px */
-  --ifm-h5-font-size: 1rem; /* 16px */
-  --ifm-h6-font-size: 0.875rem; /* 14px */
-  --ifm-small-font-size: 0.75rem; /* 12px */
-
-  --ifm-heading-font-weight: var(--ifm-font-weight-semibold);
-
-  --ifm-footer-padding-vertical: 3rem;
-}
-
-/* Dark Mode Styles */
-html[data-theme='dark'] {
-  --ifm-link-color: #48ADF6;
-  --ifm-heading-color: var(--color-gray-12);
-  --ifm-navbar-background-color: var(--color-gray-82);
-  --ifm-background-color: var(--color-gray-90);
-  --ifm-hero-background-color: var(--ifm-background-color);
-  --ifm-table-stripe-background: var(--color-gray-86-alpha-04);
-  --ifm-pre-background: var(--color-gray-86);
-  --ifm-code-background: var(--color-gray-86);
-  --ifm-dropdown-background-color: var(--color-gray-78);
-  --ifm-card-background-color: var(--color-gray-82);
-  --ifm-footer-background-color: var(--color-gray-82);
-  --collapse-button-bg-color-dark: var(--color-gray-86);
-  --docsearch-searchbox-background: var(--color-gray-90) !important;
-  --docsearch-searchbox-focus-background: var(--color-gray-86) !important;
-}