slider front colour

ui-style.css

@@ -1,15 +1,27 @@
 :root {
-    --background: ivory;
+    --background: white;
     --active: royalblue;
     --nonactive: lightsteelblue;
     --alert: red;
     --textcolor: #737373;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 html {
     background-color: var(--background);
 }
 
+body {
+    font-family: "Poppins", sans-serif;
+}
+
+p,
+label,
+input[type=text] {
+    font-size: 13px;
+}
+
 /*navigation*/
 #nav,
 #navPlayers {
@@ -17,10 +29,12 @@ html {
     display: flex !important;
     flex-flow: row nowrap;
     position: relative;
+    margin: auto;
+    width: 100%;
 }
 
 #navPlayers>button {
-    width: 24.9vw;
+    /*width: 24.9vw;*/
     color: var(--nonactive);
 }
 
@@ -43,12 +57,14 @@ html {
     background-color: var(--background);
     border: 1px solid + var(--active);
     color: var(--active);
-    padding: 4px 0;
+    padding: 4px 4px;
     text-align: center;
     display: inline-block;
-    font-size: 11px;
+    font-size: 12px;
-    margin: 4px 0px;
+    margin: 4px 4px;
     width: 20vw;
+    border: solid 1px var(--textcolor);
+    border-radius: 25px;
 }
 
 .toggle {
@@ -63,7 +79,7 @@ html {
     -webkit-appearance: none;
     height: 6px;
     border-radius: 6px;
-    background: #737373;
+    background-color: #9b9b9b;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
@@ -72,25 +88,54 @@ html {
     position: absolute;
     left: 135px;
     width: 170px;
+
+    overflow: hidden;
 }
 
 .slider:hover {
     opacity: 1;
 }
 
+/*slider knob*/
+.slider::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    color: var(--active);
+    margin-top: -1px;
+}
+
 .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: active;
+    background: var(--active);
+    box-shadow: -80px 0 0 80px var(--active);
 }
 
+.slider::-moz-range-progress {
+    background-color: var(--active);
+}
+/*
+
+input[type='range']::-webkit-slider-runnable-track {
+    height: 10px;
+    -webkit-appearance: none;
+    color: #13bba4;
+    margin-top: -1px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+    width: 10px;
+    -webkit-appearance: none;
+    height: 10px;
+    cursor: ew-resize;
+    background: #434343;
+    box-shadow: -80px 0 0 80px #43e5f7;
+}
+*/
 label {
     position: absolute;
-    font-family: Arial;
-    font-size: 10;
     color: var(--textcolor);
 }