1 files changed, 128 insertions, 70 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index c451b81..279e750 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,52 +1,16 @@
-.banner {
-    color: #e7eaf6 !important;
-}
-
-.ml-18 {
-    margin-left: 9rem;
-}
-
-.mr-18 {
-    margin-right: 9rem;
-}
-
-.btn-primary {
-    background: #38598b !important;
-    color: #ffffff !important;
-}
-
-.primary-color { 
-	background: #e7eaf6; 
-}
-	
-.secondary-color { 
-	background: #a2a8d3; 
-}
 
-.third-color { 
-	background: #38598b; 
-}
+@media screen and (min-width: 1280px) {
+    .ml-18 {
+	margin-left: 9rem;
+    }
 
-.fourth-color { 
-    background: #113f67; 
-}
+    .mr-18 {
+	margin-right: 9rem;
+    }
 
-.sidebar {
-    border: 1px solid #dadff1;
-    border-radius: 4px;
-    background: #f3f3f3;
-    justify-content: space-between;
-}
-
-.content {
-    border: 1px solid #dadff1;
-    border-radius: 4px;
-    background: #f3f3f3;
-}
-
-.sidebar-element {
-    border-bottom: 1px solid #38598b;
-    color: #113f67;
+    p {
+	font-size: 22px;
+    }
 }
 
 .flex-container {
@@ -67,38 +31,132 @@
     font-size: 18px;
 }
 
-body {
-    font-family: Roboto, Helvetica, Arial, sans-serif !important;
-    margin: 0;
-}
+@media(prefers-color-scheme: dark) {
+    .is-info {
+	background: #e8630a !important;
+	color: #e7eaf6;
+    }
+    
+    .banner {
+	color: #e7eaf6 !important;
+	background: #e8630a;
+    }
+
+    .sidebar {
+	border: 1px solid #3e4a61;
+	border-radius: 4px;
+	background: #1a2639;
+	justify-content: space-between;
+    }
+
+    .sidebar-element {
+	border-bottom: 1px solid #e8630a;
+	color: #ff5722;
+    }
+
+    .content {
+	border: 1px solid #3e4a61;
+	border-radius: 4px;
+	background: #1a2639;
+    }
+
+    a {
+	color: #e8630a;
+    }
+
+    h1 {
+	color: #ff5722 !important;
+    }
+
+    h2 {
+	color: #ff895d !important;
+    }
+
+    h3 {
+	color: #ff894c !important;
+    }
+
+    pre {
+	border: 1px #3e4a61 solid;
+	border-radius: 4px;
+    }
+
+    li::marker {
+	color: #dc2f2f;
+    }
+
+    p {
+	color: #fafafa;
+    }
+}
+
+@media(prefers-color-scheme: light) {
+    .is-info {
+	background: #38598b !important;
+	color: #e7eaf6;
+    }
+    
+    .banner {
+	color: #e7eaf6 !important;
+	background: #38598b; 
+    }
 
-a {
-    color: #38598b;
-}
+    .btn-primary {
+	background: #38598b !important;
+	color: #ffffff !important;
+    }
 
-p {
-    font-size: 22px;
-}
+    .sidebar {
+	border: 1px solid #dadff1;
+	border-radius: 4px;
+	background: #f3f3f3;
+	justify-content: space-between;
+    }
 
-h1 {
-    color: #113f67 !important;
-}
+    .content {
+	border: 1px solid #dadff1;
+	border-radius: 4px;
+	background: #f3f3f3;
+    }
 
-h2 {
-    color: #155084 !important;
-}
+    .sidebar-element {
+	border-bottom: 1px solid #38598b;
+	color: #113f67;
+    }
 
-h3 {
-    color: #285f8a !important;
-}
+    a {
+	color: #38598b;
+    }
 
-pre {
-    border: 1px #dadff1 solid;
-    border-radius: 4px;
+    h1 {
+	color: #113f67 !important;
+    }
+
+    h2 {
+	color: #155084 !important;
+    }
+
+    h3 {
+	color: #285f8a !important;
+    }
+
+    pre {
+	border: 1px #dadff1 solid;
+	border-radius: 4px;
+    }
+
+    li::marker {
+	color: #155084;
+    }
+
+    p {
+	color: #2a2438;
+    }
 }
 
-li::marker {
-    color: #155084;
+body {
+    font-family: Roboto, Helvetica, Arial, sans-serif !important;
+    margin: 0;
 }
 
 :not(.sidebar-element) li {