1 files changed, 111 insertions, 20 deletions

diff --git a/static/style.css b/static/style.css
index 8e258e5..affd975 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,34 +1,125 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f4f4f4;
+main {
+    font-family: monospace, monospace;
+    max-width: 38rem;
+    padding: 2rem;
+    margin: auto;
 }
 
 header {
-    background-color: #333;
-    color: #fff;
-    padding: 1rem;
+    max-width: 50rem;
+    padding: 2rem;
+    margin: auto;
+    background-color: #040529;
+    color: #9978fc;
 }
 
-header h1 {
-    margin: 0;
+@media only screen and (max-device-width: 736px) {
+    main {
+        padding: 0rem;
+    }
+
+    header {
+        padding: 0rem;
+    }
 }
 
-header a {
-    color: #fff;
-    text-decoration: none;
+::selection {
+    background: #d3869b;
 }
 
-main {
-    padding: 1rem;
+body {
+    background: #282828;
+    color: #ebdbb2;
+}
+
+pre {
+    background-color: #3c3836;
+    padding: 1em;
+    border: 0;
+}
+
+a,
+a:active,
+a:visited {
+    color: #b16286;
+    background-color: #1d2021;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    margin-bottom: .1rem;
+}
+
+blockquote {
+    border-left: 1px solid #bdae93;
+    margin: 0.5em 10px;
+    padding: 0.5em 10px;
+}
+
+footer {
+    text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #fbf1c7;
+        color: #3c3836;
+    }
+
+    pre {
+        background-color: #ebdbb2;
+        padding: 1em;
+        border: 0;
+    }
+
+    a,
+    a:active,
+    a:visited {
+        color: #b16286;
+        background-color: #f9f5d7;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        margin-bottom: .1rem;
+    }
+
+    blockquote {
+        border-left: 1px solid #655c54;
+        margin: 0.5em 10px;
+        padding: 0.5em 10px;
+    }
+}
+
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
 }
 
-a {
-    color: #333;
-    text-decoration: none;
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active,
+.collapsible:hover {
+    background-color: #ccc;
 }
 
-a:hover {
-    text-decoration: underline;
+/* Style the collapsible content. Note: hidden by default */
+.content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
 }
\ No newline at end of file