#background {
  object-fit: cover;
  height: 100vh;
  width: 100vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(7px);
  opacity: .3;
  z-index: -1;
}

.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.player-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 400px;
  width: 325px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 30px #f94c57;
}

#thumbnail {
  position: absolute;
  object-fit: fill;
  height: 100%;
  width: 100%;
  top: -10%;
  transition: 1s;
  z-index: 3;
}

.box {
  position: absolute;
  height: 45%;
  width: 100%;
  background: linear-gradient(90deg, rgb(145, 145, 145), rgb(220, 220, 220));
  z-index: 4;
  bottom: -10%;
  display: grid;
  grid-template-colums: 35px 255px 35px;
  grid-template-rows: 85px 25px 25px;
  grid-template-areas:
    "one two two three"
    "four four four four"
    "five five five five";
  column-gap: 10px;
}

.play-pause {
  grid-area: one;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fa-pause-circle {
  filter: invert(1);
  cursor: pointer;
  display: none;
}

#play,
#prev-track,
#next-track {
  filter: invert(1);
  cursor: pointer;
}

.track-info {
  grid-area: two;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 5%;
  /* border: 1px solid red; */
}

#track-artist {
  color: #f94c57;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  text-shadow: 0 0 15px white;
}

#track-title {
  color: white;
  font-family: "Lato", sans-serif;
  font-size: 2rem;
}

.next-prev {
  grid-area: three;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* border: 1px solid red; */
}

.progress-bar {
  grid-area: four;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}

#progressBar {
  appearance: none;
  height: 5px;
  background: white;
  width: 57.5%;
  outline: none;
  border-radius: 30px;
}

#progressBar::-webkit-slider-thumb {
  appearance: none;
  height: 11px;
  width: 11px;
  outline: none;
  background: #f94c57;
  border-radius: 30px;
  cursor: pointer;
}

.track-time {
  grid-area: five;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  /* border: 1px solid red; */
}

#currentTime {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: white;
}

#durationTime {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: #f94c57;
  text-shadow: 0 0 15px white;
}