Add a picture below the features

src/index.html

@@ -106,11 +106,20 @@ title: Pepperminty Wiki
 	</figure>
 </div>
 
-<div class="feature-small">
+<div class="feature-small panel padding-medium centre-text">
 	<p>And more! Check out the <a href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/02-Features.html">feature list</a> for an extended list of supported features.</p>
 	<p>Don't see a feature you need? <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">Open an issue</a>!</p>
 </div>
 
+<div class="double lean-left">
+	<img class="left margin-medium lift-from-page" src="static/images/page-dark.png" alt="Screenshot showing the dark theme and the menu off" />
+	<!-- <div class="left">
+	</div> -->
+	<div class="right centre padding-wide">
+		<p>A dark-theme comes built-in. By using the new <a href="https://caniuse.com/#feat=prefers-color-scheme"><code>prefers-color-scheme</code></a> CSS feature, it's enabled automatically based on your browser preference.</p>
+	</div>
+</div>
+
 <!--
 	Things to add:
 	 - We're open-source

src/static/css/main.css

@@ -5,6 +5,10 @@
 	--bg-panel: #faf8fb;
 	
 	--text-main: #111111;
+	--highlight: #ffa74d;
+	--highlight-minor: #fb701a;
+	
+	--shadow: rgba(80, 80, 80, 0.5);
 }
 
 
@@ -14,6 +18,8 @@
 		--bg-panel: hsl(273, 15%, 16%);
 		
 		--text-main: hsl(277, 38%, 89%);
+		
+		--shadow: rgba(20, 20, 20, 0.5);
 	}
 	
 	a { color: hsl(208, 67%, 67%); }
@@ -112,6 +118,29 @@ button, summary                     { cursor: pointer; }
 
 .panel {
 	background: var(--bg-panel);
+	border-bottom: 0.25em solid var(--highlight-minor);
+	border-top: 0.25em solid var(--highlight-minor);
+}
+
+.lift-from-page {
+	position: relative;
+	--amount-initial: 0.5em;
+	--blur: 0.5em;
+	border: 0.2em solid var(--highlight);
+	border-radius: 0.25em;
+	box-shadow: var(--amount-initial) var(--amount-initial) var(--blur) var(--shadow);
+	transform: translate(0, 0);
+	transition: transform 0.5s, box-shadow 0.5s;
+}
+.lift-from-page:hover {
+	--amount: 0.5em;
+	--shadow-amount: calc(var(--amount) + var(--amount-initial));
+	/* top: var(--amount-translate);
+	left: var(--amount-translate); */
+	/* top: -0.5em;
+	left: -0.5em; */
+	transform: translate(-0.5em, -0.5em);
+	box-shadow: var(--shadow-amount) var(--shadow-amount) var(--blur) var(--shadow);
 }
 
 
@@ -127,6 +156,7 @@ button, summary                     { cursor: pointer; }
 	display: grid;
 	grid-template-rows: auto;
 	grid-template-columns: 1fr 1fr;
+	grid-gap: 1em;
 }
 .double.lean-right	{ grid-template-columns: 5fr 6fr; }
 .double.lean-left	{ grid-template-columns: 6fr 5fr; }
@@ -136,8 +166,11 @@ button, summary                     { cursor: pointer; }
 .centre				{ align-self: center; justify-self: center;	}
 .centre-text		{ text-align: center;	}
 
+.margin-medium		{ margin: 2em;		}
+
 .padding-wide		{ padding: 3em;		}
 .padding-wide-ntop	{ padding: 1em 3em 3em 3em;	}
+.padding-medium		{ padding: 2em;		}
 
 .list-thin			{ padding-left: 1em; }