From 2ca583ad1eaf7b2b09c0fbeb6f2f061f6f86c1b7 Mon Sep 17 00:00:00 2001
From: Son Nguyen Hoang <hoangson091104@gmail.com>
Date: Sat, 23 Mar 2024 20:41:34 -0400
Subject: [PATCH] Update: Enhanced UI layout & design (#111)

---
 MovieVerse-Frontend/css/trivia.css | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Frontend/css/trivia.css
index 0c0686c0..35ccb3e2 100644
--- a/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Frontend/css/trivia.css
@@ -637,12 +637,23 @@ main {
     background-color: rgba(128, 128, 128, 0.5);
     padding: 20px;
     border-radius: 10px;
-    max-width: 390px;
-    margin: auto;
+    max-width: 500px;
+    margin: 10px auto;
+    box-sizing: border-box;
 }
 
 #quiz-form {
-    margin-bottom: 250px;
+    max-width: 500px;
+    margin: 10px auto;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+
+@media (max-width: 520px) {
+    #quiz-container, #quiz-form {
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
 }
 
 .button {