diff --git a/publish/assets/layout.css b/publish/assets/layout.css
index ef7c236..71de037 100644
--- a/publish/assets/layout.css
+++ b/publish/assets/layout.css
@@ -4,7 +4,7 @@
  * nextDESIGN is a personal web design for mmk2410.org.
  * The current version (v9) is focused in simplicity and minimalism.
  *
- * 2020-2021 © Marcel Kapfer <opensource@mmk2410.org>
+ * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
  * Licensed under the MIT License
  */
 html {
@@ -26,18 +26,21 @@ body {
 
 body > #preamble {
   align-items: center;
-  color: #f4f4f4;
+  color: #333;
   display: flex;
-  background-color: #4d3c9b;
   justify-content: space-between;
   padding: 20px 40px;
 }
 body > #preamble #title {
-  font-size: 24px;
+  color: #333;
+  font-size: 36px;
   font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: #4d3c9b;
+  text-decoration-thickness: 5px;
 }
 body > #preamble a {
-  color: #f4f4f4;
+  color: #4d3c9b;
   text-decoration: none;
 }
 body > #preamble a:hover {
@@ -46,6 +49,27 @@ body > #preamble a:hover {
 body > #preamble nav {
   display: inline;
 }
+body > #preamble nav a {
+  text-transform: capitalize;
+  padding: 5px 6px;
+  display: inline-block;
+}
+body > #preamble nav a:hover {
+  text-decoration: none;
+}
+body > #preamble nav a:hover:after {
+  width: 100%;
+  background: #4d3c9b;
+}
+body > #preamble nav a:after {
+  content: "";
+  display: block;
+  margin: auto;
+  height: 2px;
+  width: 0;
+  background: 0 0;
+  transition: width 0.25s ease, background-color 0.25s ease;
+}
 body > #preamble nav ul {
   margin: 0;
   padding: 0;
@@ -53,7 +77,6 @@ body > #preamble nav ul {
 }
 body > #preamble nav ul li {
   display: inline;
-  padding-right: 10px;
 }
 body > #preamble nav ul li:last-child {
   padding-right: 0;
@@ -64,14 +87,24 @@ body > #preamble .show-menu {
   padding: 10px;
   text-align: center;
   width: 100%;
+  color: #4d3c9b;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+@media (prefers-color-scheme: dark) {
+  body > #preamble .show-menu {
+    color: #ad9bff;
+  }
 }
 body > #preamble input[type=checkbox] {
   display: none;
 }
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1100px) {
   body > #preamble {
     border-radius: initial;
     flex-direction: column;
+    background: #fff;
+    padding-bottom: 0;
   }
   body > #preamble nav {
     display: none;
@@ -96,14 +129,30 @@ body > #preamble input[type=checkbox] {
     display: block;
   }
 }
+@media (prefers-color-scheme: dark) {
+  body > #preamble {
+    background: #333;
+  }
+  body > #preamble a {
+    color: #ad9bff;
+  }
+  body > #preamble #title {
+    color: #fafafa;
+    text-decoration-color: #ad9bff;
+  }
+  body > #preamble nav a:hover:after {
+    background: #ad9bff;
+  }
+}
 
 #content {
   background-color: #fff;
   border: solid 2px #4d3c9b;
+  border-radius: 25px;
   box-shadow: 1px 1px 5px #888;
-  margin: 100px auto;
+  margin: 50px auto 100px;
   max-width: 800px;
-  padding: 40px;
+  padding: 20px 60px 80px;
 }
 @media (prefers-color-scheme: dark) {
   #content {
@@ -114,7 +163,7 @@ body > #preamble input[type=checkbox] {
 #content article {
   margin: 40px 0;
 }
-#content h1, #content h2, #content h3 {
+#content h1, #content h2 {
   font-size: 3rem;
   margin: 20px 0 0;
   padding: 0;
@@ -123,8 +172,8 @@ body > #preamble input[type=checkbox] {
   text-decoration-thickness: 4px;
 }
 @media (prefers-color-scheme: dark) {
-  #content h1, #content h2, #content h3 {
-    text-decoration-color: #755bf0;
+  #content h1, #content h2 {
+    text-decoration-color: #ad9bff;
   }
 }
 #content h2 {
@@ -139,7 +188,7 @@ body > #preamble input[type=checkbox] {
 @media (prefers-color-scheme: dark) {
   #content h2 a {
     color: #fafafa;
-    text-decoration-color: #755bf0;
+    text-decoration-color: #ad9bff;
   }
 }
 #content h2 a:hover {
@@ -147,21 +196,6 @@ body > #preamble input[type=checkbox] {
 }
 #content h3 {
   font-size: 1.3rem;
-  margin: 40px 0 0;
-  text-decoration-thickness: 3px;
-}
-#content h3 a {
-  color: #333;
-  text-decoration-color: #4d3c9b;
-}
-@media (prefers-color-scheme: dark) {
-  #content h3 a {
-    color: #fafafa;
-    text-decoration-color: #755bf0;
-  }
-}
-#content h3 a:hover {
-  text-decoration: none;
 }
 #content h4 {
   font-size: 1.1rem;
@@ -171,6 +205,7 @@ body > #preamble input[type=checkbox] {
 }
 #content figure img {
   width: 100%;
+  border-radius: 20px;
 }
 #content p {
   text-align: justify;
@@ -178,21 +213,10 @@ body > #preamble input[type=checkbox] {
 #content a {
   color: #4d3c9b;
   text-decoration: none;
-
-  /* BEGIN: From https://css-tricks.com/better-line-breaks-for-long-urls/ */
-  /* These are technically the same, but use both */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-
-  word-break: break-word;
-
-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
-  hyphens: auto;
-  /* END: From https://css-tricks.com/better-line-breaks-for-long-urls/ */
 }
 @media (prefers-color-scheme: dark) {
   #content a {
-    color: #755bf0;
+    color: #ad9bff;
   }
 }
 #content a:hover {
@@ -205,15 +229,32 @@ code, pre {
   font-family: "JetBrains Mono", monospace;
 }
 #content .btn {
-  color: #f4f4f4;
-  background: #4d3c9b;
-  padding: 8px 16px;
+  border: 1px solid #4d3c9b;
+  padding: 8px 12px;
   border-radius: 20px;
   line-height: 3;
   white-space: nowrap;
+  transition: all 0.15s;
+  margin-right: 5px;
+}
+#content .btn:hover {
+  box-shadow: #aaa 1px 2px 6px;
+  text-decoration: none;
+}
+@media (prefers-color-scheme: dark) {
+  #content .btn:hover {
+    box-shadow: #000 1px 2px 6px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  #content .btn {
+    border-color: #ad9bff;
+  }
+}
+#content .org-src-container {
+    border-radius: 20px;
 }
 #content .org-src-container > pre {
-  border-radius: 2px;
   overflow-y: auto;
   padding: 20px;
 }
@@ -244,39 +285,61 @@ code, pre {
   padding: 4px 8px;
   border-radius: 20px;
   white-space: nowrap;
+  transition: all 0.15s;
+}
+#content #tags > a:hover, #content #categories > a:hover {
+  box-shadow: #aaa 1px 1px 4px;
+  text-decoration: none;
+}
+@media (prefers-color-scheme: dark) {
+  #content #tags > a:hover, #content #categories > a:hover {
+    box-shadow: #000 1px 1px 4px;
+  }
 }
 #content #tags > a {
-  background: #8171c8;
+  color: #8171c8;
+  border: 1px solid #8171c8;
 }
 @media (prefers-color-scheme: dark) {
   #content #tags > a {
-    background: #4d3c9b;
+    color: #a49ccc;
+    border-color: #a49ccc;
   }
 }
 #content #categories > a {
-  background: #4d3c9b;
+  color: #4d3c9b;
+  border: 1px solid #4d3c9b;
+  margin-right: 3px;
 }
 @media (prefers-color-scheme: dark) {
   #content #categories > a {
-    background: #755bf0;
+    color: #ad9bff;
+    border: 1px solid #ad9bff;
   }
 }
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1100px) {
   #content {
     border: none;
     box-shadow: none;
     margin: 0 auto;
+    padding: 0 20px 80px;
+  }
+  #content .tagories {
+    text-align: left;
+  }
+  #content #tags a, #content #categories a {
+    line-height: 35px;
   }
 }
 
 #postamble {
-  background-color: #4d3c9b;
-  color: #f4f4f4;
+  background-color: #333;
+  color: #fafafa;
   padding: 40px;
   text-align: center;
 }
 #postamble a {
-  color: #f4f4f4;
+  color: #fafafa;
   text-decoration: none;
 }
 #postamble a:hover {