ui updating: in progress

src/index.css

@@ -7,10 +7,17 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-overflow-scrolling: touch;
-  background: #0e0e0e;
+  background: #151619;
   width: 100%;
 }
 
+
+button {
+  cursor: pointer;
+  border: none;
+
+}
+
 .player {
   position: absolute;
   height: 100%;
@@ -21,19 +28,20 @@ body {
 
 .main {
   margin: 0 auto;
-  width: 1200px;
+  width: 1440px;
   box-sizing: border-box;
 }
 
-@media screen and (min-width: 1600px) {
+@media screen and (max-width: 1440px) {
   .main {
-    width: 1440px;
+    width: 1200px;
   }
 }
 
-@media screen and (max-width: 1279px) {
+@media screen and (max-width: 1199px) {
   .main {
     width: 1000px;
+    margin: auto 24px;
   }
 }
 
@@ -45,10 +53,16 @@ body {
   }
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 920px) {
   .main {
     width: 100%;
     gap: 0;
+    padding: 0 20px;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .main {
     padding: 0 10px;
   }
 }