1 files changed, 84 insertions, 6 deletions

diff --git a/terminal.css b/terminal.css
index 70da81e..b0ad23e 100644
--- a/terminal.css
+++ b/terminal.css
@@ -1,9 +1,12 @@
 :root {
   --bg-color: #1a1b26;    /* Tokyo Night style */
+  --card-bg: #24283b;
+  --border-color: #414868;
   --text-color: #a9b1d6;
   --accent-color: #7aa2f7;
   --prompt-color: #bb9af7;
-  --font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --quote-color: #cfc9c2;
+  --font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
 }
 
 body {
@@ -34,7 +37,7 @@ a:hover {
 
 /* Navbar styling to match the vibe */
 nav {
-  border-bottom: 1px solid #414868;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 1rem;
   margin-bottom: 2rem;
 }
@@ -44,18 +47,81 @@ nav a {
   font-weight: bold;
 }
 
+/* Code & Preformatted Blocks */
+pre {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 1rem;
+  overflow-x: auto;
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+code {
+  font-family: var(--font-family);
+  font-size: 0.9em;
+}
+
+:not(pre) > code {
+  background-color: var(--card-bg);
+  color: var(--prompt-color);
+  padding: 0.15em 0.4em;
+  border-radius: 3px;
+  border: 1px solid rgba(65, 72, 104, 0.5);
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.5rem 0;
+  display: block;
+  overflow-x: auto;
+}
+
+th, td {
+  border: 1px solid var(--border-color);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+th {
+  background-color: var(--card-bg);
+  color: var(--accent-color);
+  font-weight: bold;
+}
+
+tr:nth-child(even) {
+  background-color: rgba(36, 40, 59, 0.4);
+}
+
+/* Blockquotes */
+blockquote {
+  border-left: 3px solid var(--accent-color);
+  margin: 1.25rem 0;
+  padding: 0.5rem 1rem;
+  background-color: rgba(36, 40, 59, 0.3);
+  color: var(--quote-color);
+}
+
+/* Horizontal Rules */
+hr {
+  border: none;
+  border-top: 1px dashed var(--border-color);
+  margin: 2rem 0;
+}
+
 /* Minimalist container for the "Terminal" feel */
 #quarto-content {
-  border: 1px solid #414868;
+  border: 1px solid var(--border-color);
   padding: 2rem;
   border-radius: 4px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.5);
 }
 
 /* Figures: constrain to the content column, keep aspect ratio, center */
-/* NOTE: with format minimal:true quarto emits .quarto-figure divs directly in
-   body — there is NO #quarto-content wrapper in the rendered HTML. Target the
-   figure classes + generic imgs, not #quarto-content. */
 .quarto-figure {
   margin: 1.5rem 0;
 }
@@ -86,3 +152,15 @@ body::before {
   pointer-events: none;
   background-size: 100% 2px, 3px 100%;
 }
+
+/* Mobile Responsiveness */
+@media (max-width: 600px) {
+  body {
+    padding: 1rem;
+  }
+  nav a {
+    margin-right: 0.75rem;
+    display: inline-block;
+    margin-bottom: 0.25rem;
+  }
+}