Update styling

web/static/styles.css

@@ -1,10 +1,10 @@
 body {
   font-family: 'Helvetica';
-  margin-top: 100px;
-  margin-left: 100px;
-  margin-right: 100px;
+  margin-top: 40px;
+  margin-left: 10px;
+  margin-right: 10px;
   padding: 0;
-  text-align: center; /* Centering content */
+  text-align: center;
 }
 
 .header {
@@ -21,7 +21,7 @@ body {
 
 .dropzone {
   margin-top: 20px;
-  width: 52%;
+  width: 95%;
   min-height: 500px;
   border: 2px solid #000000;
   display: flex;
@@ -33,7 +33,7 @@ body {
 
 .right-container {
   margin-top: 20px;
-  width: 52%;
+  width: 95%;
   padding: 20px;
   border: 2px solid #000000;
   display: block;
@@ -156,10 +156,20 @@ visibility: visible; /* Show the tooltip on image hover */
 /* For tablets and desktops, add a breakpoint */
 @media (min-width: 768px) {
   body {
-    margin: 10px;
+    font-family: 'Helvetica';
+    margin-top: 90px;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding: 0;
+    text-align: center;
+  }
+
+  .container {
+    flex-direction: row;
+    justify-content: space-around;
   }
 
- .dropzone {
+  .left-container, .dropzone {
     width: 48%;
   }