diff --git a/web/css/style.css b/web/css/style.css
index 40d03f2..ba654d3 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -4,7 +4,7 @@ html {
 
 body {
 	margin: 0;
-	background-image: url('../img/bg-winter.jpg');
+	background-image: url('../img/bg-spring.jpg');
 	background-position: center;
 	background-size: cover;
 }
@@ -16,6 +16,14 @@ details {
 	background: rgba(255,255,255,0.8);
 }
 
+.dark details {
+	background: rgba(0,0,0,0.8);
+}
+
+summary {
+	cursor: pointer;
+}
+
 summary h2 {
 	display: inline;
 	font-size: 1.2em;
diff --git a/web/img/bg-autumn.jpg b/web/img/bg-autumn.jpg
new file mode 100644
index 0000000..ad4774c
Binary files /dev/null and b/web/img/bg-autumn.jpg differ
diff --git a/web/img/bg-spring.jpg b/web/img/bg-spring.jpg
new file mode 100644
index 0000000..6df41a4
Binary files /dev/null and b/web/img/bg-spring.jpg differ
diff --git a/web/img/bg-summer-2.jpg b/web/img/bg-summer-2.jpg
new file mode 100644
index 0000000..e2e5fdf
Binary files /dev/null and b/web/img/bg-summer-2.jpg differ
diff --git a/web/img/bg-summer.jpg b/web/img/bg-summer.jpg
new file mode 100644
index 0000000..38ab3e7
Binary files /dev/null and b/web/img/bg-summer.jpg differ
diff --git a/web/img/bg-winter-2.jpg b/web/img/bg-winter-2.jpg
new file mode 100644
index 0000000..a7e9dd7
Binary files /dev/null and b/web/img/bg-winter-2.jpg differ
diff --git a/web/js/main.js b/web/js/main.js
index 7dfa595..d499ca5 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -11,16 +11,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
     setMap()
 
 
-	// For custom (dark) CSS themes, set the <details> background to the inverse of
-	// the text colour.
-	const parseColour    = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
-	const dumpColour     = (col) => `rgba(${col.join(',')})`
-	const textColour     = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
-	const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
-	const sheet = document.styleSheets[0]
-	sheet.insertRule(`
-		details {
-			background-color: ${dumpColour(invertedColour)} !important;
-		}`
-	)
+	// For custom (dark) CSS themes that don't recognize the <details> background, set it to black.
+	const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
+	const luminance   = ([r,g,b]) => 0.2126*r + 0.7152*g + 0.0722*b
+	const textCol     = window.getComputedStyle(document.body).getPropertyValue('color')
+
+	if (luminance(parseColour(textCol)) > 0.5)
+		document.body.classList.add('dark')
 })