Create style.css

style.css

@@ -0,0 +1,66 @@
+/* style.css */
+body {
+    background-color: #000; /* Black background */
+    color: #fff; /* White text */
+    font-family: Arial, sans-serif;
+}
+
+.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 */
+}
+
+/* Increasing the size of the visuals */
+.image img, .audio audio {
+    width: 200%; /* Double the size */
+    height: auto;
+}
+
+/* Styling textboxes, images, and audios with grey borders */
+.textbox, .image, .audio {
+    border: 2px solid #808080; /* Grey border */
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #111; /* Slightly lighter black for the input/output boxes */
+}
+
+/* Button styling */
+.button {
+    background-color: var(--color-primary);
+    color: var(--color-primary-contrast);
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 10px;
+    border-radius: 4px; /* Rounded corners for the button */
+}
+
+.button:hover {
+    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;
+    flex-direction: column; /* Stack children vertically */
+    align-items: center; /* Center children horizontally */
+    width: 100%;
+}
+
+/* Make visuals responsive to screen size */
+@media (max-width: 768px) {
+    .image img, .audio audio {
+        width: 100%; /* Adjust size for smaller screens */
+    }
+}