body {
  background-color: #dde7f5;
}
@media screen and (min-width: 750px) {
  html {
    font-size: 37.5px !important;
  }
}
.wrapper {
  height: 100%;
  border-radius: 0.266667rem;
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
}
.wrapper .title {
  height: 5.333333rem;
  margin: 0 auto;
  text-align: center;
  color: #48505c;
  padding: 2rem;
}
.wrapper .title .song-name {
  margin-bottom: 0.266667rem;
}
.wrapper .title .song-author {
  color: #8997ac;
}
.wrapper .circle {
  margin-bottom: 2.666667rem;
  text-align: center;
}
.wrapper .circle img {
  width: 80%;
  margin: 0 auto;
  border-radius: 50%;
  background: #e6f2fe;
  box-shadow: 14px 14px 12px #787e84, -14px -14px 12px #ffffff;
  animation: spin 50s infinite;
}
.wrapper .timer {
  width: 80%;
  margin: 1rem auto;
  text-align: center;
  color: #48505c;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .timer .progress-box {
  width: 10.666667rem;
  height: 0.233333rem;
  position: absolute;
  left: 24%;
  border-radius: 0.133333rem;
  background-color: #cddfe6;
}
.wrapper .timer .progress-box .progress-bar {
  height: 0.233333rem;
  border-radius: 0.133333rem;
  background-color: #a3d9ee;
}
.wrapper .player {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0.533333rem auto;
}
.wrapper .player .pre,
.wrapper .player .next {
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: 50%;
  background: #bdcee4;
  box-shadow: inset 23px 23px 54px #b1b9c4, inset -23px -23px 54px #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
}
.wrapper .player .pre div,
.wrapper .player .next div {
  width: 1.733333rem;
  height: 1.733333rem;
  margin: 0 auto;
  text-align: center;
  line-height: 1.733333rem;
  border-radius: 50px;
  background: linear-gradient(145deg, #e6f2fe, #c2cbd5);
  box-shadow: 7px 7px 14px #acb5be, -7px -7px 14px #ffffff;
}
.wrapper .player .pre div i,
.wrapper .player .next div i {
  opacity: 0.5;
}
.wrapper .player .play {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  margin: 0 2.133333rem;
  background: #bdcee4;
  box-shadow: inset 23px 23px 54px #b9c5d6, inset -23px -23px 54px #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
}
.wrapper .player .play div {
  width: 2.666667rem;
  height: 2.666667rem;
  margin: 0 auto;
  text-align: center;
  line-height: 2.666667rem;
  border-radius: 50px;
  background: linear-gradient(145deg, #c2cbd5, #e6f2fe);
  box-shadow: 7px 7px 14px #acb5be, -7px -7px 14px #ffffff;
}
.wrapper .player .play div i {
  opacity: 0.5;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}