body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background-color: #ffffff;
}

.music-player {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(100deg, hotpink, purple, yellow);
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(214, 183, 8, 0.925);
  padding: 2em;
}
.music-player_title {
  font-family: "Inter", sans-serif;
  color: #ffffff;
  font-weight: 800;
  font-size: xx-large;
  position: absolute;
  top: 6em;
  align-content: center;
  margin-bottom: 2em;
  letter-spacing: 0.2em;
}
.music-player_now-playing {
  color: #ffffff;
  font-size: x-large;
  position: flex;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: -1em;
}
.music-player_artist {
  color: #ffffff;
  font-size: larger;
  position: flex;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.music-player_display {
  width: 300px;
  height: 400px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.music-player_search {
  position: absolute;
  top: 12em;
  right: 45em;
}
.music-player_powerbutton {
  position: absolute;
  top: 12em;
  left: 45em;
}
.music-player_display img {
  width: 70%;
  height: 60%;
  border-radius: 50px;
  border: 3px solid rgba(255, 192, 203, 0.486);
  margin-bottom: -6em;
}
.meter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20em;
  height: 1em;
  border: solid white 0.01em;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    blue,
    rgb(15, 156, 238),
    rgb(156, 233, 233),
    white
  );
}

.control-button {
  padding: 1em 2em;
  background-color: #6b34ec;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}
.control-button:hover {
  box-shadow: 0 0 15px #ffffff, 0 5px 0 gray, 0 0 5px rgb(219, 238, 238);
}
.volume-slider {
  width: 20%;
  position: relative;
  right: -2em;
}
.volume-slider::before {
  font-family: "FontAwesome";
  content: "\f6a9";
  left: -1.5em;
  position: absolute;
  color: #ffffff;
  font-size: medium;
}
.volume-slider::after {
  font-family: "FontAwesome";
  content: "\f028";
  right: -1.5em;
  position: absolute;
  color: #ffffff;
  font-size: medium;
}