From e5198507ae7ff7dc72585a59c0b9c9afe67983e1 Mon Sep 17 00:00:00 2001
From: Marijn Doeve <marijn@doeve.me>
Date: Wed, 1 Jul 2026 21:32:16 +0200
Subject: [PATCH] Fix quiz page vertical centering regression

The CSS cleanup broke vertical centering: flex on body causes main to
stretch full-width; place-items:center on a grid body only centers
items within their auto-sized track (not the track within body).

Fix: move background/color to html (full-viewport grid that centers
body), give body height:100% + display:grid + align-content:center
(centers the content track within full-height body) + justify-self:center
(shrink-wraps body width). Matches production behavior exactly.
---
 assets/styles/quiz.scss | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/assets/styles/quiz.scss b/assets/styles/quiz.scss
index 14a112f..3c4e3be 100644
--- a/assets/styles/quiz.scss
+++ b/assets/styles/quiz.scss
@@ -1,17 +1,23 @@
 html {
     height: 100%;
-}
-
-body {
-    min-height: 100%;
     background-image: url("../img/background.png");
     background-position: center;
     background-repeat: no-repeat;
     background-color: black;
     color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    display: grid;
+    align-items: center;
+}
+
+body {
+    height: 100%;
+    background-image: url("../img/background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: black;
+    display: grid;
+    align-content: center;
+    justify-self: center;
 }
 
 .elimination-screen {