center checkmarks and make text larger

src/components/Beeswarm.vue

 <template>
-    <section id="beeswarm">
+<section id="beeswarm">
         <div
             id="title"
             class="text-container title-text"
@@ -392,10 +392,34 @@
   
 <style scoped lang="scss">
 $switchWidth: 12rem;
-
 #toggle-container {
     display: flex;
+    justify-content: center;
+    align-items: center;
     width: 100%;
+    margin: 20px 0; /* Add some margin to give space around the toggle container */
+}
+
+#checkbox1-container,
+#checkbox2-container,
+#checkbox3-container {
+    display: flex;
+    align-items: center;
+    margin: 0 10px; /* Add some space between the checkboxes */
+}
+
+#checkbox1-container label,
+#checkbox2-container label,
+#checkbox3-container label {
+    margin-left: 5px; /* Add space between the checkbox and the label */
+    font-size: 2rem; /* Increase label font size if needed */
+}
+
+#checkbox1,
+#checkbox2,
+#checkbox3 {
+    transform: scale(1.5); /* Adjust the scale to make checkboxes bigger */
+    margin-right: 10px; /* Add some space between checkbox and label */
 }
 
 .graph-buttons-switch {
@@ -409,18 +433,19 @@ $switchWidth: 12rem;
     -webkit-box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1remx rgba(255, 255, 255, 0.1);
     box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1rem rgba(255, 255, 255, 0.1);
 
-      -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-      -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome and Opera */
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+
     @media screen and (max-width: 600px) {
-      height: 2.6rem;
+        height: 2.6rem;
     }
-  }
-  .graph-buttons-switch-label {
+}
+
+.graph-buttons-switch-label {
     position: relative;
     z-index: 2;
     float: left;
@@ -428,30 +453,40 @@ $switchWidth: 12rem;
     line-height: 2.4rem;
     text-align: center;
     cursor: pointer;
+
     @media screen and (max-width: 600px) {
-      line-height: 2.2rem;
-      width: $switchWidth * 1.02;
+        line-height: 2.2rem;
+        width: $switchWidth * 1.02;
     }
-  }
-  .graph-buttons-switch-label-off {
+}
+
+.graph-buttons-switch-label-off {
     padding-left: 0.2rem;
     padding-right: 0.2rem;
-  }
-  .graph-buttons-switch-label-on {
+}
+
+.graph-buttons-switch-label-on {
     padding-left: 0.2rem;
     padding-right: 0.2rem;
-  }
-  .graph-buttons-switch-input {display: none;}
-  .graph-buttons-switch-input:checked + .graph-buttons-switch-label {
+}
+
+.graph-buttons-switch-input {
+    display: none;
+}
+
+.graph-buttons-switch-input:checked + .graph-buttons-switch-label {
     font-weight: bold;
     -webkit-transition: 0.3s ease-out;
     -moz-transition: 0.3s ease-out;
     -o-transition: 0.3s ease-out;
     transition: 0.3s ease-out;
-  }
-  .graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {left: $switchWidth;}
+}
+
+.graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {
+    left: $switchWidth;
+}
 
-  .graph-buttons-switch-selection {
+.graph-buttons-switch-selection {
     display: block;
     position: absolute;
     z-index: 1;
@@ -459,19 +494,19 @@ $switchWidth: 12rem;
     left: 0.2rem;
     width: $switchWidth;
     height: 2.4rem;
-    background: rgba(255, 255, 255,1);
+    background: rgba(255, 255, 255, 1);
     border-radius: 0.2rem;
-    -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255,0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 0.1rem rgba(255, 255, 255,0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
-    -webkit-transition: left 0.3s ease-out,background 0.3s;
-    -moz-transition: left 0.3s ease-out,background 0.3s;
-    -o-transition: left 0.3s ease-out,background 0.3s;
-    transition: left 0.3s ease-out,background 0.3s ;
-  /* 	transition: background 0.3s ; */
+    -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
+    -webkit-transition: left 0.3s ease-out, background 0.3s;
+    -moz-transition: left 0.3s ease-out, background 0.3s;
+    -o-transition: left 0.3s ease-out, background 0.3s;
+    transition: left 0.3s ease-out, background 0.3s;
+
     @media screen and (max-width: 600px) {
-      height: 2.2rem;
+        height: 2.2rem;
     }
-  }
+}
 
 #beeswarm-chart-container {
     text-align: center;
@@ -495,16 +530,6 @@ $switchWidth: 12rem;
     user-select: none;
 }
 
-// #button-container {
-//     display: flex;
-//     justify-content: center;
-//     margin-top: 20px;
-// }
-
-// #button-container button {
-//     margin: 0 10px; 
-// }
-
 .tooltip {
     font-size: 16px;
     background-color: white;
@@ -513,14 +538,10 @@ $switchWidth: 12rem;
     border-radius: 5px;
     padding: 5px;
     position: absolute;
-    // pointer-events: none;
 }
 
-// TO DO: not working
 text.xLabel  {
     font-weight: 600;
 }
-
 </style>
-
   
\ No newline at end of file