diff --git a/source/head.scm b/source/head.scm
index e5ed724..8214644 100644
--- a/source/head.scm
+++ b/source/head.scm
@@ -13,6 +13,18 @@
  (meta ((name "ascii-art-description")
         (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/style/styles.css")))
+ (style "
+p.ascii {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 8px;
+  white-space: pre;
+  margin: 0;
+}
+p.ascii.but-normal-size {
+  font-size: medium;
+}")
  (script ((src "/static/htmx.min.js")
           (defer "")
           )))
diff --git a/static/style/styles.css b/static/style/styles.css
new file mode 100644
index 0000000..2bb4fe2
--- /dev/null
+++ b/static/style/styles.css
@@ -0,0 +1,181 @@
+: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);
+    --banner-background-color: lab(0 5 1 / 0.6);
+  }
+}
+
+@media screen and (prefers-color-scheme: light) {
+  html {
+    --foreground-color: lab(10 90 -90);
+    --background-color: lab(90 50 -30);
+    --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);
+}
+
+h1, h2, h3, h4, h5 {   
+  font-family: 'Courier New', Courier, monospace;
+  color: var(--background-color);
+  background-color: var(--visited-link-color);
+  padding: 2px 10px;
+}
+
+h5 {
+  margin: 2px 0px;
+}
+
+div.noscript p {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: small;
+}
+
+div.hx-target section {
+  border: solid 1px var(--link-color);
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin: 3px;
+}
+
+div.hx-target footer {
+  display: none;
+}
+
+article.composed-article footer {
+  display: none;
+}
+
+footer {
+  margin-top: 1em;
+  border-color: var(--visited-link-color);
+  border-top-width: 6px;
+  border-top-style: double;
+  padding-top: 1em;
+}
+
+a {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: small;
+  color: var(--link-color);
+  position: relative;
+  top: -2px;
+}
+
+a:visited {
+  color: var(--visited-link-color);
+  text-decoration-color: var(--link-color);
+}
+
+a:not(.ascii a):not(a[hx-get*="hx"]):not(a[href*="#"])::before {
+  content: ". -> .";
+  font-weight: 900;
+  display: inline-block;
+  padding-right: .5em;
+}
+
+a[href*="#"] {
+  content: "↓";
+  font-weight: 900;
+  font-size: larger;
+  display: inline-block;
+  padding-right: .5em;
+}
+
+a[rel="me"] {
+  display: none;
+}
+
+body {
+  max-width: 600px;
+  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 {
+  width: max-content;
+  margin: auto;
+  background-color: var(--banner-background-color);
+}
+
+div.banner p.ascii {
+  color: var(--banner-ascii-color);
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  padding: 5px;
+}
+
+nav a {
+  padding: 5px;
+}
+
+p {
+  margin: 12px 0px;
+}
+
+ul.tag-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 6px 0px;
+  padding: 0px;
+}
+
+li.tag-item {
+  list-style-type: none;
+  flex-basis: fit-content;
+  margin: 0px 6px;
+}
+
+img {
+  width: 96%;
+  margin: 2%;
+  border-color: var(--foreground-color);
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 2px;
+}
+