@import url("https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css 510");

:root {

  /****** bg *******/
  /* colorizare background */
  --bg01: linear-gradient(180deg,
  #22262A 0%,
  #181A1D 100%);

  /* colorizare butoane play now */
  --bg02: linear-gradient(135deg,
  #2F3439,
  #1D1F23);

  --bg03: linear-gradient(135deg,
  #2C3136,
  #1D2023);

  --bg04: #040404;

  --border01: #22262A;
  --border02: #1A1D21;

  /***** box-shadow *****/
  --box-shadow01:
      6px 6px 10px #151618,
      -6px -6px 10px #2c3136,
      inset 2px 2px 6px #33353b,
      inset -3px -3px 6px #151618;

  --box-shadow02:
     -6px -6px 10px #151618,
      6px 6px 10px  #2c3136,
      inset 2px 2px 6px #33353b,
      inset -3px -3px 6px #151618;

  --box-shadow03:
      6px 6px 12px #151618,
      -6px -6px 12px #2c3136;

  --box-shadow04:
      inset 2px 2px 3px -2px rgba(167,169, 171, 0.322),
      inset 0px -1px 1px 0px #4a4c4e;

  --box-shadow05:
    8px 8px 12px #151618,
    -2px -2px 10px #2c3136,
    inset 2px 2px 3px #33353b,
    inset -2px -2px 3px #151618;

  --box-shadow06:
    10px 10px 12px #151618,
    -10px -10px 12px #222529,
    inset 4px 4px 8px #33353b,
    inset -4px -4px 8px #151618;

  --box-shadow07:
    10px 10px 12px #151618,
    -10px -10px 12px #222529,
    inset -4px -4px 8px #33353b,
    inset 4px 4px 8px #151618;

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

body {
  font-family: 'Lato', sans-serif;
  background: var(--bg01);
  height: 100vh;
}

.wrapper {
  max-width: 900px;
  height: 100vh;
  text-align: center;
  padding: 2rem;
  margin: 0 auto;
  overflow: hidden;
}

header,
.song-timer,
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* butoanele de la play now */
header .hdbtn {
  background: var(--bg02);
  border: 10px solid var(--border01);
  box-shadow: var(--box-shadow01);
  width: 70px;
  height: 70px;
  line-height: 60px;
  color: #86898c;
  font-size: 30px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hdbtn:active {
  box-shadow: var(--box-shadow02);
}

/* playing now */
header h3 {
  text-transform: uppercase;
  font-size: 14px;
  color: #86898c;
}

.player {
  margin-top: 2rem;
}

img {
  width: 30rem;
  height: 30rem;
  margin-bottom: 2rem;
  object-fit: cover;
  border: 10px solid var(--border02);
  border-radius:50%;
  box-shadow: var(--box-shadow03);
  animation: rotation 8s infinite linear;
  transform-origin: center;
}

.name {
  color: #A7A9AB;
  font-size: 1.3rem;
  text-transform: capitalize;
}

.artist {
  color: #7c7d80;
  font-size: 14px;
  text-transform: capitalize;
  padding: 10px 0 20px 0;
}

.audioC {
  margin: 10px 0px 10px 0px;
}

.song-timer {
  margin-bottom: 20px;
}

.song-timer {
  font-size: 13px;
  color: #7c7d80;
  user-select: none;
  font-weight: 800;
}

.progress-area {
  height: 7px;
  width: 100%;
  margin-top: 15px;
  border-radius: 50px;
  background: var(--bg04);
  box-shadow: var(--box-shadow04);
  cursor: pointer;

}

.progress-area .progress-bar {
  height: inherit;
  width: 0%;
  position: relative;
  border-radius: inherit;
  background: linear-gradient(90deg,
                #bf2311 0%,
                #e1530a 80%);
  box-shadow: var(--box-shadow04);
}

.progress-bar::before {
  content: "";
  position: absolute;
  background: var(--bg02);
  box-shadow: var(--box-shadow05);
  border-radius: 50%;
  top: 50%;
  right: -14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  outline: none;
  border: none;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.progress-bar::after {
  content: "";
  position: absolute;
  background: #e1530a;
  border-radius: 50%;
  top: 50%;
  right: -5px;
  z-index: 2;
  width: 10px;
  height: 10px;
  outline: none;
  border: none;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.controls {
  margin: 55px 8px 5px 8px;
}

.btnC {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--border02);
  transition: all 0.2s ease;
  background: var(--bg03);
  box-shadow: var(--box-shadow06);
}

.btnC:active {
  box-shadow: var(--box-shadow07);
}
.controls i {
  font-size: 20px;
  user-select: none;
  color: #A7A9AB;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.controls .play-pause {
  width: 80px;
  height: 80px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.play-pause i {
  text-align: center;
  color: #ffffff;
}

.play-pause {
  border: 3px solid #b3d4fc;
  background: linear-gradient(135deg,
                #2c3136,
                #000000);
  box-shadow:
        10px 10px 12px #151618,
        -10px -10px 12px #222529,
        inset 4px 4px 8px #b3d4fc,
        inset -4px -4px 8px #2c3136;
}

.play-pause:active {
  box-shadow:
      10px 10px 12px #151618,
      -10px -10px 12px #222529,
      inset -10px -10px 8px #b3d4fc,
      inset 10px 10px 8px #2c3136;
}

.rotate {
  animation: rotation 8s infinite linear;
  transform-origin: center;
}
@keyframes rotation
{
  from
  {
    transform: rotate(0deg);
  }
  to
  {
    transform: rotate(359deg);
  }

}