diff --git a/app/config/config.toml.example b/app/config/config.toml.example
index 9c3ec657..0f3b679e 100644
--- a/app/config/config.toml.example
+++ b/app/config/config.toml.example
@@ -15,7 +15,7 @@ show_anime_collection = true
 show_manga_collection = false
 
 # cache driver for api calls (NullDriver, SQLDriver, RedisDriver)
-cache_driver = NullDriver
+cache_driver = "NullDriver"
 
 # path to public directory on the server
 asset_dir = "/../../public"
\ No newline at end of file
diff --git a/public/css/base.css b/public/css/base.css
index b499c743..95f19e2a 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -424,7 +424,7 @@ h1 a {
   text-align: center;
   width: 220px;
   height: 319px;
-  margin: 0.25em;
+  margin: 0.25em 0.125em;
 }
 
 .media .edit_buttons > button {
@@ -438,7 +438,7 @@ h1 a {
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
   background: rgba(0, 0, 0, 0.45);
   color: #ffffff;
-  padding: 0.25em;
+  padding: 0.25em 0.125em;
   text-align: right;
 }
 
@@ -481,7 +481,6 @@ h1 a {
 }
 
 .media > .name > a {
-  /*text-align:justify;*/
   background: none;
   color: #fff;
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
@@ -675,4 +674,24 @@ h1 a {
 
 .details td:nth-child(even) {
   text-align: left;
+}
+
+/* ----------------------------------------------------------------------------
+	Viewport-based styles
+-----------------------------------------------------------------------------*/
+
+@media screen and (max-width: 40em) {
+  nav a {
+    line-height: 4em;
+    line-height: 4rem;
+  }
+
+  .media {
+    margin: 2px 0;
+  }
+
+  main {
+    padding: 0 0,5em 0.5em;
+    padding: 0 0.5rem 0.5rem;
+  }
 }
\ No newline at end of file
diff --git a/public/css/base.myth.css b/public/css/base.myth.css
index 132e4443..1cdfc5b5 100644
--- a/public/css/base.myth.css
+++ b/public/css/base.myth.css
@@ -3,10 +3,11 @@
 	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
 	--title-overlay: rgba(0, 0, 0, 0.45);
 	--text-color: #ffffff;
-	--normal-padding: 0.25em;
+	--normal-padding: 0.25em 0.125em;
 	--link-hover-color: #7d12db;
 	--edit-link-hover-color: #db7d12;
 	--edit-link-color: #12db18;
+	--radius: 5px;
 }
 
 template, [hidden="hidden"], .media[hidden] {display:none}
@@ -352,7 +353,6 @@ a:hover, a:active {
 		}
 
 		.media > .name > a {
-			/*text-align:justify;*/
 			background:none;
 			color:#fff;
 			text-shadow: var(--shadow);
@@ -527,4 +527,24 @@ a:hover, a:active {
 }
 .details td:nth-child(even) {
 	text-align:left;
+}
+
+/* ----------------------------------------------------------------------------
+	Viewport-based styles
+-----------------------------------------------------------------------------*/
+
+@media screen and (max-width: 40em) {
+	nav a {
+		line-height:4em;
+		line-height:4rem;
+	}
+
+	.media {
+		margin:2px 0;
+	}
+
+	main {
+		padding:0 0,5em 0.5em;
+		padding:0 0.5rem 0.5rem;
+	}
 }
\ No newline at end of file
diff --git a/public/css/marx.myth.css b/public/css/marx.myth.css
index c22e49ad..79aa897c 100644
--- a/public/css/marx.myth.css
+++ b/public/css/marx.myth.css
@@ -9,6 +9,7 @@
 	line-height:1.4;
 	overflow-y:scroll;
 	text-size-adjust:100%;
+	scroll-behavior: smooth;
 }
 
 audio:not([controls])