make it barely work

sass/song.scss

@@ -21,41 +21,53 @@
 }
 
 #playbutton {
-  width: 10%;
+  width: 8%;
   aspect-ratio: 1/1;
+  margin-right: 15px;
+  background: #313244;
+  border: none;
+  color: #cba6f7;
+  border-radius: 100%;
+  line-height: 100%;
+  text-align: center;
 }
 
 .seek {
-  outline: none;
   -webkit-appearance: none;
-}
-
-.seek {
-  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-  width: 80%;
-  --thumb-height: 1.125em;
-	--track-height: 0.125em;
-	--brightness-hover: 180%;
-	--brightness-down: 80%;
-	--clip-edges: 0.125em;
-  color: #f07167;
-  --track-color: rgba(255, 255, 255, 0.1);
-}
-
-.seek::-webkit-slider-thumb {
-  -webkit-appearance: none;
-}
-
-.seek:focus {
-  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
-}
-
-.seek::-ms-track {
+  margin-left: 15px;
   width: 100%;
-  cursor: pointer;
-
-  /* Hides the slider so custom styles can be added */
-  background: transparent; 
-  border-color: transparent;
-  color: transparent;
+  height: 8px;
+}
+.seek:focus {
+  outline: none;
+}
+
+.seek::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #CDD6F4;
+}
+.seek::-webkit-slider-thumb {
+  cursor: pointer;
+  opacity: 0;
+}
+.seek:focus::-webkit-slider-runnable-track {
+  background: #CDD6F4;
+}
+.seek::-moz-range-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #CDD6F4;
+}
+.seek::-moz-range-progress {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #cba6f7;
+}
+.seek::-moz-range-thumb {
+  opacity: 0;
+  cursor: pointer;
 }