diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 15260f5..b571cf7 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -49,7 +49,6 @@ const { title } = Astro.props;
 				width: 100vw;
 				height: 100vh;
 				overflow-x: hidden;
-
 				background-color: var(--bg);
 				font-family:
 					system-ui,
@@ -66,6 +65,7 @@ const { title } = Astro.props;
 				font-size: 18px;
 				color: white;
 				scrollbar-color: #fff2 transparent;
+				tab-size: 4;
 				--bg: #0b0a0b;
 				--hbg: color-mix(in srgb, #0b0a0b, black); /* half background */
 				--acc: #ca3eed;
diff --git a/src/pages/basic-html.md b/src/pages/basic-html.md
index c9aa4b3..e1e5406 100644
--- a/src/pages/basic-html.md
+++ b/src/pages/basic-html.md
@@ -5,7 +5,8 @@ order: 1
 
 # Basic HTML
 
->### Note
+> ### Note
+>
 > For the purposes of easy documentation, all examples will be written with JSX syntax, which is not supported in the JavaScript standard and must be used with a preprocessor such as tsc, esbuild, Babel, etc. This is entirely optional, and the `html` tag function is provided to allow for use without a preprocessor:
 >
 > ```js
@@ -13,7 +14,9 @@ order: 1
 > 	html`<button on:click=${() => this.counter++}>I have been clicked ${use(this.counter)} times!</button>`;
 > )
 > ```
+>
 > Whereas the equivalent JSX would look like
+>
 > ```jsx
 > return (
 > 	<button on:click={() => this.counter++}>I have been clicked {use(this.counter)} times!</button>;
@@ -32,7 +35,9 @@ document.body.appendChild(button);
 ```
 
 We just created a button, with the class "some-button", and added it to the document. This is the simplest possible way of using dreamland, and is why it's so easy to slowly transition to using it from a plain-js codebase.
+
 > Note: If you are coming from react, you may be used to using `className` instead of `class`. In dreamland, we use `class` to match the standard HTML attribute.
+
 ### Extra (syntax) Sugar!
 
 What if we wanted to do something when the button is clicked? For any DOM event, you can use `on:` handlers.
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8038fb4..5578419 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -50,7 +50,6 @@ document.body.appendChild(root);
 						dreamland has <b>no virtual DOM</b>, <b>no JSX</b>, and <b>no build step</b>. Just write your
 						components in javascript and attach them to the DOM.
 					</p>
-					<br />
 					<p>
 						dreamland is <b>extremely small</b>, coming in at <b>1.6kb</b> minified and gzipped.
 					</p>
@@ -130,9 +129,10 @@ document.body.appendChild(root);
 				gap: 3rem;
 				text-align: left;
 			}
-			@media (max-width: 800px) {
+			@media (max-width: 60rem) {
 				.split {
 					flex-direction: column-reverse;
+					gap: 0;
 				}
 			}
 
diff --git a/src/styles/style.css b/src/styles/style.css
index eb49848..d27f8c1 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,6 +1,5 @@
 main {
 	color: #ddd;
-	tab-size: 4;
 	h1,
 	h2,
 	h3,