Update style.css

style.css

@@ -1,16 +1,34 @@
 /* style.css */
-body {
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
     background-color: #000; /* Black background */
     color: #fff; /* White text */
     font-family: Arial, sans-serif;
 }
 
+body::before {
+    content: "";
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border: 5px solid #ff0000; /* Red border around the entire app */
+    pointer-events: none; /* Allows interaction with elements beneath */
+}
+
 .gradio {
     --color-bg: #000; /* Black background */
     --color-text: #fff; /* White text */
     --color-border: #808080; /* Grey borders */
     --color-primary: #ff0000; /* Red for primary elements like buttons */
     --color-primary-contrast: #fff; /* White text on primary elements */
+    box-sizing: border-box;
+    position: relative;
+    max-width: calc(100% - 10px); /* Adjusted to prevent overflow due to the border */
+    margin: 5px auto; /* Center the content while accounting for the border */
 }
 
 /* Increasing the size of the visuals */
@@ -43,13 +61,6 @@ body {
     background-color: #d10000; /* A darker shade of red on hover */
 }
 
-/* Overall border styling for the app container */
-.container {
-    border: 3px solid #ff0000; /* Red border */
-    padding: 20px;
-    margin-top: 20px;
-}
-
 /* Adjust layout for elements to follow the button directly */
 .row {
     display: flex;