/* MusicMediaPlayer */
/* MusicMediaPlayer */
/* MusicMediaPlayer */
/* MusicMediaPlayer */

/* body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right,#9a1d86, #1595be);
    font-weight: bold;
    } */

    .player {
      /* height: 75vh; */
      /* height: 75vh; */
      display: flex;
      align-items: center;
      flex-direction: column;
      /* justify-content: center; */
    }
    
    .wrapper {
      /* border: 1px solid transparent; */
      /* padding: 30px; */
      border-radius: 20px;
      /* background-color: #000000; */
      /* background-color: #cf1a1a; */
      /* background-color: #cf1a1a; */


      /* background-image: url(../assets/img/eyelooping.gif); */

      background-position: center;
      background-repeat: no-repeat;
      /* background-size: contain; */
      /* background-size: cover; */
    
      /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
        rgba(0, 0, 0, 0.22) 0px 15px 12px; */
    }

    /* .wrapper{
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;

      height: 350px;
    } */

    
    .details {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    
    .track-art {
      margin: 25px;
      height: 250px;
      width: 250px;
      border: 2px solid #ffffff;
      background-size: cover;
      background-position: center;
      border-radius: 50%;
      -moz-box-shadow: 0px 6px 5px black;
      -webkit-box-shadow: 0px 6px 5px black;
      box-shadow: 0px 6px 5px black;
      -moz-border-radius: 190px;
      -webkit-border-radius: 190px;
      border-radius: 190px;
    }
    
    .now-playing {
      font-size: 1rem;
      color: transparent;
    }
    
    .track-name {
      font-size: 2.5rem;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      color: rgb(255, 0, 0);
    
      background-position: center;
    
      background-image: url(./img/);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-size: cover;
    
      color: white;
      text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000f3;
    }
    
    .track-artist {
      margin-top: 5px;
      /* font-size: 1.5rem;
      color: rgb(255, 0, 0);
    
      background-image: url(./); */
    
      font-size: 2.5rem;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      /* color: rgb(255, 0, 0); */
    
      background-position: center;
    
      /* background-image: url(/LimitlessMusicStructurepg/assets/img/eyelooping.gif); */
      background-clip: text;
      -webkit-background-clip: text;
      /* color: transparent; */
      color: white;

      background-size: cover;
      text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
    }
    
    .buttons {
      color: rgb(255, 255, 255);
      text-shadow: 0 0 20px #ff0606, 0 0 40px #ff0000;
    
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 30px;
    }
    .active {
      color: black;
    }
    
    .repeat-track,
    .random-track,
    .playpause-track,
    .prev-track,
    .next-track {
      padding: 25px;
      opacity: 0.8;
      transition: opacity 0.2s;
    }
    
    .repeat-track:hover,
    .random-track:hover,
    .playpause-track:hover,
    .prev-track:hover,
    .next-track:hover {
      opacity: 1;
    }
    
    .slider_container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .seek_slider,
    .volume_slider {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 5px;
      background: #6f6f70;
      /* background: transparent; */
    
      -webkit-transition: 0.2s;
      transition: opacity 0.2s;
    }
    
    .seek_slider::-webkit-slider-thumb,
    .volume_slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 15px;
      height: 15px;
      background: white;
      border: 3px solid #ff0000;
      cursor: grab;
      border-radius: 100%;
    }
    
    .seek_slider:hover,
    .volume_slider:hover {
      opacity: 1;
    }
    
    .seek_slider {
      width: 60%;
    }
    
    .volume_slider {
      width: 30%;
      color: tr;
    }
    
    .current-time,
    .total-duration {
      padding: 10px;
    }
    
    i.fa-volume-down,
    i.fa-volume-up {
      padding: 10px;
    }
    
    i,
    i.fa-play-circle,
    i.fa-pause-circle,
    i.fa-step-forward,
    i.fa-step-backward,
    p {
      cursor: pointer;
    }
    .randomActive {
      color: black;
    }
    .rotate {
      animation: rotation 8s infinite linear;
    }
    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }
    .loader {
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loader .stroke {
      background: #f1f1f1;
      height: 150%;
      width: 10px;
      border-radius: 50px;
      margin: 0 5px;
      animation: animate 1.4s linear infinite;
    }
    @keyframes animate {
      50% {
        height: 20%;
        background: #4286f4;
      }
    
      100% {
        background: #4286f4;
        height: 100%;
      }
    }
    .stroke:nth-child(1) {
      animation-delay: 0s;
    }
    .stroke:nth-child(2) {
      animation-delay: 0.3s;
    }
    .stroke:nth-child(3) {
      animation-delay: 0.6s;
    }
    .stroke:nth-child(4) {
      animation-delay: 0.9s;
    }
    .stroke:nth-child(5) {
      animation-delay: 0.6s;
    }
    .stroke:nth-child(6) {
      animation-delay: 0.3s;
    }
    .stroke:nth-child(7) {
      animation-delay: 0s;
    }