.icon {

  display: inline-block;

  width: 1em;

  height: 1em;

  stroke-width: 0;

  stroke: currentColor;

   }





.player {

  background: #eef3f7;

  width: 370px;

  min-height: 350px;

  box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);

  border-radius: 15px;

	

  padding: 30px; }

  @media screen and (max-width: 576px), (max-height: 500px) {

    .player {

      width: 95%;

      padding: 20px;

      margin-top: 75px;

      min-height: initial;

      padding-bottom: 30px;

      max-width: 400px; } }

  .player__top {

    display: flex;

    align-items: flex-start;

    position: relative;

    z-index: 4; }

    @media screen and (max-width: 576px), (max-height: 500px) {

      .player__top {

        flex-wrap: wrap; } }

  .player-cover {

    width: 200px;

    height: 200px;

    margin-left: 0px;

    flex-shrink: 0;

    position: relative;

    z-index: 2;

    border-radius: 15px;

    z-index: 1; }

    @media screen and (max-width: 576px), (max-height: 500px) {

      .player-cover {

        margin-top: -70px;

        margin-bottom: 25px;

        width: 200px;

        height: 150px;

        margin-left: auto;

        margin-right: auto; } }

    .player-cover__item {

      background-repeat: no-repeat;

      background-position: center;

      background-size: cover;

      width: 100%;

      height: 100%;

      border-radius: 15px;

      position: absolute;

      left: 0;

      top: 0; }

      .player-cover__item:before {

        content: "";

        background: inherit;

        width: 100%;

        height: 100%;

        box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);

        display: block;

        z-index: 1;

        position: absolute;

        top: 30px;

        transform: scale(0.9);

        filter: blur(10px);

        opacity: 0.9;

        border-radius: 15px; }

      .player-cover__item:after {

        content: "";

        background: inherit;

        width: 100%;

        height: 100%;

        box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);

        display: block;

        z-index: 2;

        position: absolute;

        border-radius: 15px; }

    .player-cover__img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      border-radius: 15px;

      box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);

      user-select: none;

      pointer-events: none; }

  .player-controls {

    flex: 1;

    padding-left: 20px;

    display: flex;

    flex-direction: column;

    align-items: center; }

    @media screen and (max-width: 576px), (max-height: 500px) {

      .player-controls {

        flex-direction: row;

        padding-left: 0;

        width: 100%;

        flex: unset; } }

    .player-controls__item {

      display: inline-flex;

      font-size: 30px;

      padding: 5px;

      margin-bottom: 10px;

      color: #acb8cc;

      cursor: pointer;

      width: 50px;

      height: 50px;

      align-items: center;

      justify-content: center;

      position: relative;

      transition: all 0.3s ease-in-out; }

      @media screen and (max-width: 576px), (max-height: 500px) {

        .player-controls__item {

          font-size: 26px;

          padding: 5px;

          margin-right: 10px;

          color: #acb8cc;

          cursor: pointer;

          width: 40px;

          height: 40px;

          margin-bottom: 0; } }

      .player-controls__item::before {

        content: "";

        position: absolute;

        width: 100%;

        height: 100%;

        border-radius: 50%;

        background: #fff;

        transform: scale(0.5);

        opacity: 0;

        box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);

        transition: all 0.3s ease-in-out;

        transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88); }

      @media screen and (min-width: 500px) {

        .player-controls__item:hover {

          color: #532ab9; }

          .player-controls__item:hover::before {

            opacity: 1;

            transform: scale(1.3); } }

      @media screen and (max-width: 576px), (max-height: 500px) {

        .player-controls__item:active {

          color: #532ab9; }

          .player-controls__item:active::before {

            opacity: 1;

            transform: scale(1.3); } }

      .player-controls__item .icon {

        position: relative;

        z-index: 2; }

      .player-controls__item.-xl {

        margin-bottom: 0;

        font-size: 95px;

        filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));

        color: #fff;

        width: auto;

        height: auto;

        display: inline-flex; }

        @media screen and (max-width: 576px), (max-height: 500px) {

          .player-controls__item.-xl {

            margin-left: auto;

            font-size: 75px;

            margin-right: 0; } }

        .player-controls__item.-xl:before {

          display: none; }

      .player-controls__item.-favorite.active {

        color: red; }



[v-cloak] {

  display: none; }



[v-cloak] > * {

  display: none; }



.progress {

  width: 100%;

  margin-top: -15px;

  user-select: none; }

  .progress__top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between; }

  .progress__duration {

    color: #71829e;

    font-weight: 700;

    font-size: 20px;

    opacity: 0.5; }

  .progress__time {

    margin-top: 2px;

    color: #71829e;

    font-weight: 700;

    font-size: 16px;

    opacity: 0.7; }



.progress__bar {

  height: 6px;

  width: 100%;

  cursor: pointer;

  background-color: #d0d8e6;

  display: inline-block;

  border-radius: 10px; }



.progress__current {

  height: inherit;

  width: 0%;

  background-color: #a3b3ce;

  border-radius: 10px; }



.album-info {

  color: #71829e;

  flex: 1;

  padding-right: 60px;

	margin-top: 30px;

  user-select: none; }

  @media screen and (max-width: 576px), (max-height: 500px) {

    .album-info {

      padding-right: 30px; } }

  .album-info__name {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 12px;

    line-height: 1.3em; }

    @media screen and (max-width: 576px), (max-height: 500px) {

      .album-info__name {

        font-size: 18px;

        margin-bottom: 9px; } }

  .album-info__track {

    font-weight: 400;

    font-size: 20px;

    opacity: 0.7;

    line-height: 1.3em;

    min-height: 52px; }

    @media screen and (max-width: 576px), (max-height: 500px) {

      .album-info__track {

        font-size: 18px;

        min-height: 50px; } }



.github-btn {

  position: absolute;

  right: 40px;

  bottom: 50px;

  text-decoration: none;

  padding: 15px 25px;

  border-radius: 4px;

  box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);

  background: #24292e;

  color: #fff;

  font-weight: bold;

  letter-spacing: 1px;

  font-size: 16px;

  transition: all .3s ease-in-out; }

  @media screen and (min-width: 500px) {

    .github-btn:hover {

      transform: scale(1.1);

      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); } }

  @media screen and (max-width: 700px) {

    .github-btn {

      position: relative;

      bottom: auto;

      right: auto;

      margin-top: 20px; }

      .github-btn:active {

        transform: scale(1.1);

        box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); } }



.scale-out-enter-active {

  transition: all .35s ease-in-out; }



.scale-out-leave-active {

  transition: all .35s ease-in-out; }



.scale-out-enter {

  transform: scale(0.55);

  pointer-events: none;

  opacity: 0; }



.scale-out-leave-to {

  transform: scale(1.2);

  pointer-events: none;

  opacity: 0; }



.scale-in-enter-active {

  transition: all .35s ease-in-out; }



.scale-in-leave-active {

  transition: all .35s ease-in-out; }



.scale-in-enter {

  transform: scale(1.2);

  pointer-events: none;

  opacity: 0; }



.scale-in-leave-to {

  transform: scale(0.55);

  pointer-events: none;

  opacity: 0; }