Update style.css

style.css

@@ -12,6 +12,7 @@ body {
 
 body {
     padding: 32px;
+    background-color: #f5f5f5; /* Light background for contrast */
 }
 
 body,
@@ -25,22 +26,47 @@ body,
 #container {
     position: relative;
     gap: 0.4rem;
-
     width: 640px;
     height: 640px;
     max-width: 100%;
     max-height: 100%;
-
-    border: 2px dashed #D1D5DB;
+    border: 2px dashed #3572A5; /* Python blue */
     border-radius: 0.75rem;
     overflow: hidden;
     cursor: pointer;
     margin: 1rem;
-
+    background-color: #FFD43B; /* Python yellow */
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     font-size: 18px;
+    color: #282c34; /* Dark text color for readability */
+}
+
+textarea {
+    width: 95%;
+    height: 200px;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #3572A5;
+    border-radius: 5px;
+    background-color: #FFFFFF;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #3572A5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #285e8e;
 }
 
 #upload {
@@ -54,6 +80,7 @@ svg {
 #example {
     font-size: 14px;
     text-decoration: underline;
+    color: #3572A5;
     cursor: pointer;
 }
 
@@ -73,4 +100,15 @@ svg {
     font-size: 12px;
     margin: -16px 0 0 -2px;
     padding: 1px;
-}
+}
+
+#results {
+    width: 95%;
+    max-width: 640px;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+    margin-top: 10px;
+    overflow: auto;
+}