feat: implement highlighting of mutuality

src/App.css

@@ -28,33 +28,42 @@ footer {
 .controls {
   z-index: 9;
   position: absolute;
-  width: 240px;
-  right: 24px;
   top: 1vh;
-  padding: 16px;
+  right: 0px;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
 
   .control {
     display: flex;
     flex-direction: row;
-    margin: 4px 2px;
-    background-color: aliceblue;
+    flex-wrap: wrap;
+    max-width: 240px;
+    margin: 0px;
+    background-color: #F0F8FFdd;
 
-    * {
-      margin: 4px;
+    .slider,
+    span {
+      padding-left: 4px;
+      padding-right: 4px;
     }
   }
 
   #three-slider {
     display: flex;
     flex-direction: row;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
   }
 }
 
 /* The switch - the box around the slider */
 .switch {
   position: relative;
-  width: 68px;
-  height: 42px;
+  width: 48px;
+  height: 24px;
 }
 
 /* Hide default HTML checkbox */
@@ -81,10 +90,10 @@ footer {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
   background-color: white;
   border-radius: 50%;
   -webkit-transition: .4s;
@@ -100,9 +109,9 @@ input:focus+.slider {
 }
 
 input:checked+.slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+  -webkit-transform: translateX(24px);
+  -ms-transform: translateX(24px);
+  transform: translateX(24px);
 }
 
 .grey {