ok

src/components/MusicPlayer.css

@@ -1,7 +1,7 @@
 .music-player {
   position: relative;
   width: 95%;
-  margin: -10px auto 20px;
+  margin: 7px auto 20px;
   /* Added padding for top and bottom */
   color: white;
   box-sizing: border-box;
@@ -24,7 +24,7 @@
   /* Center the background image */
   filter: blur(1.5px);
   -webkit-filter: blur(1.5px);
-  border-radius: 23px 23px 0 0;
+  border-radius: 13px 13px 0 0;
   background-color: rgb(95 121 89);
   /* Rounded corners at the top */
   text-align: right;
@@ -32,6 +32,8 @@
 }
 
 .current-name {
+  white-space: nowrap;
+  pointer-events: none;
   position: relative;
   z-index: 2;
   text-align: left;
@@ -41,7 +43,29 @@
   /* Text shadow for readability */
 }
 
+/* styles.css */
+@keyframes slideAnimation {
+  0% {
+    margin-left: 100vw;
+  }
+  10% {
+    margin-left: 30px;
+  }
+  70% {
+    margin-left: 30px;
+  }
+  100% {
+    margin-left: -100vw;
+  }
+}
+
+.animated-text {
+  animation: slideAnimation 3s linear infinite; /* 4s duration for the animation */
+  white-space: nowrap; /* Prevent text from wrapping */
+}
+
 .current-artist {
+  pointer-events: none;
   position: relative;
   z-index: 2;
   text-align: left;
@@ -52,6 +76,7 @@
 }
 
 .progress-container {
+  pointer-events: none;
   position: relative;
   z-index: 2;
   text-align: left;
@@ -104,9 +129,10 @@
   position: relative;
   left: 0;
   right: 0;
-  background-color: rgb(29, 185, 84);
+  /* background-color: rgb(29, 185, 84); */
+  background-color: #73a585;
   /* background-color: rgb(218 163 99); */
-  border-radius: 0 0 23px 23px;
+  border-radius: 0 0 13px 13px;
   /* Rounded corners at the bottom */
   cursor: pointer;
   text-align: center;
@@ -134,7 +160,9 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(29, 185, 84);
+  /* background-color: rgb(29, 185, 84); */
+  
+  background-color: #73a585;
 }
 
 .search-box input[type="text"] {