diff --git a/source/head.txt b/source/head.txt
index af1b69d..753cd82 100644
--- a/source/head.txt
+++ b/source/head.txt
@@ -11,7 +11,7 @@
         (content "it's a crop of the work 'Oxalis acetosella', Otto Wilhelm Thomé
 (1885) run through the ascii-art generation tool on https://www.asciiart.eu/")))
  (link ((rel "stylesheet")
-        (href "/static/styles.css")))
+        (href "/static/style/styles.css")))
  (style "
 p.ascii {
   font-family: 'Courier New', Courier, monospace;
diff --git a/static/style/styles.css b/static/style/styles.css
index 9b259dd..0471c39 100644
--- a/static/style/styles.css
+++ b/static/style/styles.css
@@ -9,21 +9,24 @@
     --link-color: lab(80 40 100);
     --visited-link-color: lab(70 10 15);
     --banner-ascii-color: lab(90 -40 20 / 0.8);
+    --banner-background-color: lab(0 5 1 / 0.6);
   }
 }
 
 @media screen and (prefers-color-scheme: light) {
   html {
-    --foreground-color: lab(10 50 -80);
+    --foreground-color: lab(10 90 -90);
     --background-color: lab(90 50 -30);
-    --link-color: lab(20 40 100);
-    --visited-link-color: lab(20 10 15);
+    --link-color: lab(20 30 -20);
+    --visited-link-color: lab(20 90 -90);
     --banner-ascii-color: lab(10 -40 20 / 0.8);
+    --banner-background-color: lab(90 -15 20 / 0.6);
   }
 }
 
 html {
   padding: 20px;
+  overflow-wrap: break-word;
   color: var(--foreground-color);
   background-color: var(--background-color);
 }
@@ -93,9 +96,9 @@ header{
 }
 
 div.banner {
-  background-color: lab(0 5 1 / 0.8);
   width: max-content;
   margin: auto;
+  background-color: var(--banner-background-color);
 }
 
 div.banner p.ascii {
diff --git a/static/styles.css b/static/styles.css
deleted file mode 100644
index 9b259dd..0000000
--- a/static/styles.css
+++ /dev/null
@@ -1,131 +0,0 @@
-:root {
-  color-scheme: light dark;
-}
-
-@media screen and not (prefers-color-scheme: light) {
-  html  {
-    --foreground-color: lab(90 50 -80);
-    --background-color: lab(0 50 -30);
-    --link-color: lab(80 40 100);
-    --visited-link-color: lab(70 10 15);
-    --banner-ascii-color: lab(90 -40 20 / 0.8);
-  }
-}
-
-@media screen and (prefers-color-scheme: light) {
-  html {
-    --foreground-color: lab(10 50 -80);
-    --background-color: lab(90 50 -30);
-    --link-color: lab(20 40 100);
-    --visited-link-color: lab(20 10 15);
-    --banner-ascii-color: lab(10 -40 20 / 0.8);
-  }
-}
-
-html {
-  padding: 20px;
-  color: var(--foreground-color);
-  background-color: var(--background-color);
-}
-
-h1, h2, h3, h4, h5 {   
-  font-family: 'Courier New', Courier, monospace;
-  color: var(--background-color);
-  background-color: var(--visited-link-color);
-  padding: 2 10;
-}
-
-h5 {
-  margin: 2 0;
-}
-
-span.noscript p {
-  font-family: 'Courier New', Courier, monospace;
-  font-size: small;
-}
-
-span.hx-target section {
-  border: solid 1px var(--link-color);
-  border-radius: 4px;
-  padding: 0 10;
-  margin: 3;
-}
-
-a {
-  font-family: 'Courier New', Courier, monospace;
-  font-size: small;
-  color: var(--link-color);
-}
-
-a:visited {
-  color: var(--visited-link-color);
-  text-decoration-color: var(--link-color);
-}
-
-body {
-  max-width: 600;
-  margin: auto;
-  font-size: medium;
-  font-family: sans-serif;
-}
-
-header{
-  display: flex;
-  flex-direction: column;
-}
-
-@media screen and (max-width: 600px) {
-  div.banner p.ascii {
-    font-size: 5px;
-  }
-  body {
-    max-width: 375px;
-  }
-}
-
-@media screen and (min-width: 1000px) {
-  div.banner {
-    padding: 0 auto;
-  } 
-  body {
-    max-width: 800px;
-  } 
-}
-
-div.banner {
-  background-color: lab(0 5 1 / 0.8);
-  width: max-content;
-  margin: auto;
-}
-
-div.banner p.ascii {
-  color: var(--banner-ascii-color);
-}
-
-nav {
-  display: flex;
-  flex-direction: row;
-  padding: 5px;
-}
-
-nav a {
-  padding: 5px;
-}
-
-p {
-  margin: 12 0;
-}
-
-ul.tag-list {
-  display: flex;
-  flex-direction: row;
-  margin: 6 0;
-  padding: 0;
-}
-
-li.tag-item {
-  list-style-type: none;
-  flex-basis: fit-content;
-  margin: 0 6;
-}
-