made changes

public/index.css

@@ -2,7 +2,7 @@
 
 body {
   background-color: #262626;
-  margin: 20px;
+  margin: 1vw;
   color: #ffffff;
   overflow: clip;
   font-family:Work Sans,sans-serif;
@@ -14,29 +14,24 @@ body {
   justify-content: space-between;
 }
 
-#title {
-  max-width: 500px;
-}
-
-
 /* --- Left column --- */
 .song {
   position: relative;
 }
 
 #song-image {
-  width: 500px;
-  height: 500px;
-  border-radius: 20px;
+  width: 25vw;
+  height: 25vw;
+  border-radius: 1vw;
 }
 
 #song-diff {
-  font-size: 2rem;
-  padding: 16px;
-  min-width: 80px;
-  height: 40px;
-  border-radius: 20px;
-  border: 1px solid black;
+  font-size: 3vh;
+  padding: 0.8vw;
+  min-width: 5vw;
+  height: 2vw;
+  border-radius: 1vw;
+  border: 0.02vw solid black;
 
   position: absolute;
   top: 0;
@@ -46,7 +41,7 @@ body {
   text-align: center;
 }
 
-#song-diff.stale {
+#song-diff.stale, #song-diff.new {
   background-color: gray;
 }
 
@@ -58,6 +53,16 @@ body {
   background-color: red;
 }
 
+.current-column {
+  font-size: 2.25vh;
+}
+
+.current-column h1 {
+  margin-bottom: 0;
+}
+.current-column h2 {
+  margin: 0;
+}
 
 /* --- Middle column --- */
 .left-divide {
@@ -66,18 +71,17 @@ body {
 }
 
 .song-stats {
-  margin-left: 100px;
+  margin-left: 2vw;
 }
 
-.artist-info p {
-  margin: 0;
-  padding: 0;
+.artist-info {
+  font-size: 2.25vh;
 }
 
 
 /* --- Right column --- */
 #queue {
-  width: 700px;
+  width: 35vw;
 }
 
 .queue-item {
@@ -86,18 +90,21 @@ body {
 }
 
 .queue-item .song-title {
-  font-size: 2rem;
-  margin-left: 20px;
+  font-size: 3vh;
+  margin-left: 1vw;
 }
 .queue-item .song-artist {
-  font-size: 1.5rem;
-  margin-left: 20px;
+  font-size: 2.25vh;
+  margin-left: 1vw;
   color: #ccc;
 }
 .queue-item .song-time {
-  text-align: right;
-  margin-right: 10px;
-  font-size: 1.5rem;
+  margin-right: 0.5vw;
+  font-size: 2.25vh;
+
+  justify-content: right;
+  display: flex;
+  gap: 1.5vw;
 }
 .queue-right-wrapper {
   width: 100%;
@@ -109,10 +116,17 @@ body {
 }
 
 .queue-image {
-  height: 100px;
-  width: 100px;
+  height: 5vw;
+  width: 5vw;
 }
 
 .queue-item.playing {
   background-color: #1a1a1a;
 }
+
+.song-diff.queue-risen {
+  color: green;
+}
+.song-diff.queue-fallen {
+  color: red;
+}