diff --git a/.docs/css.njk b/.docs/css.njk
index 632c147..0ce986a 100644
--- a/.docs/css.njk
+++ b/.docs/css.njk
@@ -4,3 +4,4 @@ permalink: theme.css
 {% include "css/patterns.css" %}
 {% include "css/theme.css" %}
 {% include "css/gallerybox.css" %}
+{% include "css/smallscreens.css" %}
diff --git a/.docs/css/gallerybox.css b/.docs/css/gallerybox.css
index f0a2f8a..7294bfb 100644
--- a/.docs/css/gallerybox.css
+++ b/.docs/css/gallerybox.css
@@ -10,6 +10,12 @@ be (slightly) less hacky once :target-within lands in browsers.
 
 Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
  */
+ 
+@media (orientation: landscape) {
+	.gallerybox-gallery {
+		max-width: 95vw;
+	}
+}
 
 
 .gallerybox {
diff --git a/.docs/css/smallscreens.css b/.docs/css/smallscreens.css
new file mode 100644
index 0000000..17102d2
--- /dev/null
+++ b/.docs/css/smallscreens.css
@@ -0,0 +1,33 @@
+@media (max-width: 1200px) {
+	nav > ul a {
+		padding: 0.5em;
+	}
+}
+
+
+@media (max-width: 930px) {
+	nav {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
+	nav > h1 {
+		width: 100%;
+	}
+	
+	.bigbox {
+		padding: 0 5vmin;
+	}
+}
+
+@media (max-width: 640px) {
+	nav > ul {
+		padding-top: 0.5em;
+		flex-wrap: wrap;
+	}
+	
+	.bigbox h1 {
+		font-size: 1.5em;
+	}
+}
diff --git a/.docs/css/theme.css b/.docs/css/theme.css
index 7f96edf..552e41b 100644
--- a/.docs/css/theme.css
+++ b/.docs/css/theme.css
@@ -102,6 +102,7 @@ nav ul {
 	margin: 0; padding: 0;
 	display: flex;
 	justify-content: space-evenly;
+	align-items: center;
 }
 nav > ul a {
 	background: var(--bg-transcluscent-slight);
@@ -247,6 +248,7 @@ footer {
 	display: flex;
 	flex-direction: column;
 	align-items: center; justify-content: center;
+	text-align: center; /* If any text wraps in a <p>, then this makes sure it's still centred */
 	background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)),
 		var(--bg) center / cover;
 	
@@ -271,7 +273,7 @@ footer {
 .features-large > :where(figure, .features-item) {
 	background: var(--bg-transcluscent);
 	background-image: var(--pattern-bricks);
-	margin: 0.1em;
+	margin: 1em 0.1em;
 	padding: 1em;
 	max-width: 15em;
 	box-shadow: 0.25em 0.25em 0.5em var(--shadow);
@@ -306,12 +308,13 @@ footer {
 	padding: 1em 0;
 	display: flex;
 	justify-content: space-around;
+	flex-wrap: wrap;
 }
 
 .bigbutton {
 	display: inline-block;
 	
-	margin: 0;
+	margin: 0.25em 0;
 	padding: 0.35em 0.45em;
 	border: 0;
 	border-radius: 0.25em;