diff --git a/assets/css/styles.css b/assets/css/styles.css
index b44a236..f02225c 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,6 +1,16 @@
+@media only screen and (max-aspect-ratio: 1/1){
+  /* portrait */
+  html { font-size: 32px; }
+  body { margin: 2% 5%; }
+}
+@media only screen and (min-aspect-ratio: 1/1){
+  /* landscape */
+  body { margin: 2% 15%; }
+}
+
 body {
   font-family: system-ui;
-  margin: 2% 10%;
+  font-size: 0.95rem;
 }
 
 pre, code {
@@ -28,6 +38,18 @@ h3 {
   font-weight: bold;
   margin-top: 1.75rem;
 }
+p, ul {
+  line-height: 1.35rem;
+}
+p code, ul code {
+  background-color: #9f54aa;
+  border-radius: 0.2rem;
+  color: white;
+  font-weight: bold;
+  font-size: 0.8rem;
+  padding: 0.15rem 0.4rem;
+  white-space: nowrap;
+}
 
 figure {
   border-radius: 0.2rem;
@@ -48,30 +70,25 @@ figcaption .lang {
   padding: 0 0.4rem;
 }
 pre {
-  background-color: black;
+  background-color: #272727;
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
   font-size: 0.85rem;
   line-height: 1.3rem;
   margin: 0;
+  overflow-x: auto;
   padding: 0.25rem;
 }
 pre > code {
-  background-color: black;
   color: #ffc61e;
   padding: 0;
 }
 pre > code.language-bash {
-  background-color: black;
-  color: #00d700;
+/*  color: #18e418; */
+  color: #54d771;
 }
 
 code {
-  background-color: #9f54aa;
-  border-radius: 0.2rem;
-  color: white;
-  font-weight: bold;
-  padding: 0.15rem 0.4rem;
 }
 
 code.language-ruby span.k,