update

Took 1 hour 33 minutes

public/stylesheets/setup.css

@@ -16,37 +16,41 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 0.45% 10px;
     overflow: auto;
+    overflow-x: hidden;
 }
 
+
 #setup #setupContainersDiv #containerAddBtn {
     position: relative;
     left: 46%;
     bottom: 8%;
 }
 
+
 #setup #setupLEDDiv {
     grid-row: span 3;
     grid-column: span 1;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
     margin-right: 10%;
 
 }
 
+
 #setup #setupExtraDiv {
     grid-row: span 3;
     grid-column: span 1;
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
 
@@ -55,25 +59,28 @@
 
 
 #setupContainers .setupContainer {
-    color: black;
+    color: white;
     text-align: left;
     width: calc(100% / 2.3);
     height: 12%;
     display: inline-block;
     margin-bottom: 3%;
-    border: 1px solid gray;
+    border: 2px solid #142F44;
     margin-left: 2%;
     margin-right: 2%;
     border-radius: 10px;
     padding: 3% 10px;
     transition: 0.5s;
-    background-color: rgb(135, 133, 133);
+    background-color: #4f6aaa;
     overflow: hidden;
 }
 
+
 .removeSlowly {
     animation: removeSlowlyWidth 0.8s forwards;
 }
+
+
 @keyframes removeSlowlyWidth {
 
     100% {
@@ -81,18 +88,21 @@
     }
 }
 
+
 .error {
-    background-color: rgba(255,0,0,0.5) !important;
+    background-color: var(--error) !important;
 }
 
+
 #setupContainers .setupContainer p {
-    margin-bottom: 3%;
+    margin-bottom: 4.5%;
     font-weight: 600;
     font-size: 1.2em;
 }
 
 
 #setupContainers .setupContainer select {
-    margin-bottom: 2%;
-
+    margin-bottom: 2.1%;
+    background-color: var(--select-bg);
+    color: white;
 }