update

Took 7 hours 48 minutes

public/stylesheets/inputs.css

@@ -1,10 +1,12 @@
 .btn {
-    padding: 12px 16px;
+    padding: 11px 15px;
     border: none;
     color: white;
-    font-size: 0.95em;
+    font-size: 0.96em;
     border-radius: 2px;
     cursor: none !important;
+    font-weight: 500;
+    margin-right: 2%;
 
 }
 
@@ -110,10 +112,10 @@ label {
 .input[type=checkbox] {
     margin-bottom: 2px;
     /* Double-sized Checkboxes */
-    -ms-transform: scale(1.5); /* IE */
-    -moz-transform: scale(1.5); /* FF */
-    -webkit-transform: scale(1.5); /* Safari and Chrome */
-    -o-transform: scale(1.5); /* Opera */
-    transform: scale(1.5);
-    padding: 10px;
+    -ms-transform: scale(1.6); /* IE */
+    -moz-transform: scale(1.6); /* FF */
+    -webkit-transform: scale(1.6); /* Safari and Chrome */
+    -o-transform: scale(1.6); /* Opera */
+    transform: scale(1.6);
+    padding: 12px;
 }

public/stylesheets/setup.css

@@ -4,34 +4,28 @@
     padding-top: 1%;
     display: grid;
     grid-template-columns: repeat(2, calc(95% / 2));
-    grid-template-rows: repeat(7, calc(100% / 7));
-    grid-gap: 2% 5%;
+    grid-template-rows: repeat(9, calc(100% / 9));
+    grid-gap: 2% 2%;
+    color: white;
 }
 
-#setup_slots {
-    min-width: 55px;
-    width: 10%;
-    margin-left: 3%;
-    border: 1px solid aliceblue;
-}
 
 #setup #setupContainersDiv {
-    grid-row: span 5;
+    grid-row: span 18;
     grid-column: span 2;
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid cadetblue;
+    border: 1px solid white;
     border-radius: 5px;
-    padding: 1% 10px;
+    padding: 0.45% 10px;
     overflow: auto;
-
 }
 
 #setup #setupContainersDiv #containerAddBtn {
     position: relative;
-    left: 43%;
-    bottom: 10%;
+    left: 46%;
+    bottom: 8%;
 }
 
 #setup #setupLEDDiv {
@@ -39,7 +33,7 @@
     grid-column: span 1;
     height: 100%;
     text-align: center;
-    border: 1px solid cadetblue;
+    border: 1px solid white;
     border-radius: 5px;
     padding: 1% 10px;
     margin-right: 10%;
@@ -52,7 +46,7 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid cadetblue;
+    border: 1px solid white;
     border-radius: 5px;
     padding: 1% 10px;
 
@@ -73,7 +67,7 @@
     border-radius: 10px;
     padding: 3% 10px;
     transition: 0.5s;
-    background-color: rgb(111, 109, 109);
+    background-color: rgb(135, 133, 133);
     overflow: hidden;
 }
 

public/stylesheets/style.css

@@ -34,10 +34,10 @@ body {
 }
 
 h1 {
-    font-size: 1.7em;
+    font-size: 1.74em;
     font-weight: 500;
     margin-bottom: 2%;
-    color: black;
+    color: white;
 }
 
 
@@ -53,12 +53,11 @@ h1 {
     left: 0;
     right: 0;
     height: 9%;
-    background-color: #1F5E5F;
     color: white;
     font-size: 2em;
     padding-right: 3px;
     padding-left: 3px;
-
+    background-color: #167fcc;
 }
 
 
@@ -94,7 +93,7 @@ h1 {
     left: 0;
     right: 0;
     height: 9%;
-    background-color: #1F5E5F;
+    background-color: #167fcc;
 }
 
 
@@ -121,10 +120,12 @@ h1 {
 
 #container {
     position: absolute;
-    top: 10%;
-    left: 1%;
-    right: 1%;
-    height: 80%;
+    top: 9%;
+    left: 0;
+    right: 0;
+    height: 82%;
+    color: white;
+    background-color: #0e1f31;
 }
 
 .pane {
@@ -134,7 +135,7 @@ h1 {
     ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
     scroll-behavior: smooth;
-    color: black;
+    color: white;
 }
 
 .hiddenPane {