From c1ebbaef9878d2db0d435dbc0eef01e7b598725d Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Fri, 22 May 2026 09:14:33 +1000
Subject: [PATCH] fix: wrap main-frame in flexbox centering wrapper for
 reliable centering on all resolutions

---
 public/index.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index f992544..13856a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,10 +44,13 @@
     <canvas id="pile-canvas"></canvas>
     <div class="bg-vignette"></div>
 
-    <div id="main-frame" class="main-frame">
-      <div class="frame-border">
-        <img id="main-photo" class="frame-media" alt="">
-        <video id="main-video" class="frame-media" muted playsinline style="display:none"></video>
+    <!-- Flexbox wrapper handles centering; animation lives on inner frame -->
+    <div class="main-frame-wrapper">
+      <div id="main-frame" class="main-frame">
+        <div class="frame-border">
+          <img id="main-photo" class="frame-media" alt="">
+          <video id="main-video" class="frame-media" muted playsinline style="display:none"></video>
+        </div>
       </div>
     </div>