diff --git a/docs/index.md b/docs/index.md
index 30a7c34..3ba9fe8 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -33,35 +33,6 @@ Check out the sidebar or here, below:
   An Overview of all my Achievement Guides
   </div>
 </div>
-<style>
-{`
-    .page-content-flex-container {
-        display: flex;
-        width: 100%;
-        flex-wrap: wrap;
-    }
-    .page-content-flex-box {
-        flex: 1;
-        padding: 15px;
-        margin: 10px;
-        border-radius: 8px;
-        border: 1px lightgray solid;
-        padding-bottom: 0;
-    }
-    .page-content-flex-box1 {
-        margin-left: 0;
-    }
-    .page-content-flex-box2 {
-        margin-right: 0;
-    }
-
-    @media (max-width: 600px) {
-        .box {
-            flex: 1 1 100%;
-        }
-    }
-`}
-</style>
 <div className="page-content-flex-container">
   <div className="page-content-flex-box page-content-flex-box1">
   ### [3D Printables](/overview/3d-printables)
diff --git a/src/css/custom.css b/src/css/custom.css
index 601332b..57b9814 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -41,4 +41,37 @@ table {
   border-collapse: separate;
   border-radius: 10px;
   border: 2px solid var(--custom-table-outline-color);
-}
\ No newline at end of file
+}
+
+/* used for hiding Pages from sidebar such as the overviews pages */
+.hidden {
+  display: none !important;
+}
+
+/* themed link boxes */
+.page-content-flex-container {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+}
+.page-content-flex-box {
+    flex: 1;
+    padding: 15px;
+    margin: 10px;
+    border-radius: 8px;
+    border: 1px lightgray solid;
+    padding-bottom: 0;
+}
+.page-content-flex-box1 {
+    margin-left: 0;
+}
+.page-content-flex-box2 {
+    margin-right: 0;
+    text-align: right;
+}
+
+@media (max-width: 600px) {
+    .box {
+        flex: 1 1 100%;
+    }
+}