diff --git a/components/Card.js b/components/Card.js
index 6e6e4a2..277bb5a 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -17,8 +17,8 @@ export default function Card({ post }) {
             }}
         >
             <Link
-                as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
-                href={`/posts/[slug]`}
+                as={`${post.filePath.replace(/\.mdx?$/, "")}`}
+                href={`[slug]`}
             >
                 <a>
                     {post.data.image && (
diff --git a/pages/posts/[slug].js b/pages/[slug].js
similarity index 95%
rename from pages/posts/[slug].js
rename to pages/[slug].js
index c648fce..0311b6e 100644
--- a/pages/posts/[slug].js
+++ b/pages/[slug].js
@@ -7,8 +7,8 @@ import Head from "next/head";
 import Link from "next/link";
 import Image from "next/image";
 import path from "path";
-import Layout from "../../components/Layout";
-import { gardenFilePath, GARDENS_PATH } from "../../utils/mdxUtils";
+import Layout from "../components/Layout";
+import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
diff --git a/styles/tailwind.css b/styles/tailwind.css
index 6691872..0bb3f10 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -23,10 +23,10 @@
     }
 }
 
-body {
-    height: 100%;
+html {
     background-repeat: no-repeat;
-    background-attachment: fixed;
+    background-size: cover;
+    min-height: 100vh;
     background-color: rgb(243, 250, 218);
     background: linear-gradient(
         180deg,