css adj

public/style.css

@@ -1,6 +1,6 @@
 body {
     display: flex;
-    align-items: start;
+    align-items: center;
     justify-content: center;
     height: 100vh;
     margin: 0;
@@ -10,9 +10,9 @@ div#main-container {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    width: 576px;
-    justify-content: center;
+    height: 100vh;
     align-items: center;
+    row-gap: 40px;
 }
 
 div#title {
@@ -20,13 +20,24 @@ div#title {
     text-align: center;
 }
 
-div#buttons-container {
+div#appcontent-ctn {
     display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    width: 100%;
-    height: 40px;
-    gap: 4px;
+    column-gap: 30px;
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 4px;
+}
+
+div#left-ctn {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
+}
+
+div#right-ctn {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
 }
 
 div#checkbox-rear {
@@ -43,18 +54,26 @@ div#checkbox-rear > div {
     font-family: sans-serif;
 }
 
+div#buttons-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    width: 100%;
+    height: 40px;
+    gap: 4px;
+}
+
 div#instructions-container {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     width: 100%;
     height: 40px;
-    margin: 4px 0;
     gap: 4px;
 }
 
 div#canvas-container {
-    margin: 4px 0 8px;
+    margin: 0;
 }
 
 canvas#myCanvas {
@@ -87,9 +106,9 @@ div#vision-text-container {
     font-family: sans-serif;
     display: flex;
     flex-direction: column;
+    flex: 1;
     height: 210px;
     overflow: scroll;
-    margin: 20px 0;
 }
 
 .text-msg {
@@ -98,7 +117,7 @@ div#vision-text-container {
 }
 
 .text-msg:last-child{
-    font-size: 1.2em;
+    font-size: 1em;
     line-height: 1.3em;
     font-weight: bold;
 }