@import"https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900";

body {
  background-color: #262626;
  margin: 1vw;
  color: #ffffff;
  overflow: clip;
  font-family:Work Sans,sans-serif;
}

.columns {
  display: flex;
  flex-direction: columns;
  justify-content: space-between;
}

/* --- Left column --- */
.song {
  position: relative;
}

#song-image {
  width: 25vw;
  height: 25vw;
  border-radius: 1vw;
}

#song-diff {
  font-size: 3vh;
  padding: 0.8vw;
  min-width: 5vw;
  height: 2vw;
  border-radius: 1vw;
  border: 0.02vw solid black;

  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;

  text-align: center;
}

#song-diff.stale, #song-diff.new {
  background-color: gray;
}

#song-diff.risen {
  background-color: green;
}

#song-diff.fallen {
  background-color: red;
}

.current-column {
  font-size: 2.25vh;
}

.current-column h1 {
  margin-bottom: 0;
}
.current-column h2 {
  margin: 0;
}

/* --- Middle column --- */
.left-divide {
  display: flex;
  justify-content: space-around;
}

.song-stats {
  margin-left: 2vw;
}

.artist-info {
  font-size: 2.25vh;
}


/* --- Right column --- */
#queue {
  width: 35vw;
}

.queue-item {
  display: flex;
  margin: 5px;
}

.queue-item .song-title {
  font-size: 3vh;
  margin-left: 1vw;
}
.queue-item .song-artist {
  font-size: 2.25vh;
  margin-left: 1vw;
  color: #ccc;
}
.queue-item .song-time {
  margin-right: 0.5vw;
  font-size: 2.25vh;

  justify-content: right;
  display: flex;
  gap: 1.5vw;
}
.queue-right-wrapper {
  width: 100%;
}

.queue-item p {
  margin: 0;
  padding: 0;
}

.queue-image {
  height: 5vw;
  width: 5vw;
}

.queue-item.playing {
  background-color: #1a1a1a;
}

.song-diff.queue-risen {
  color: green;
}
.song-diff.queue-fallen {
  color: red;
}