* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins';
        }
        :root {
            --pink : #ff74a4;
            --violet : #9f6ea3;
            --white : #fff;
            --lightshadow : rgba(0,0,0,0.15);
            --lightblack : #515c6f;
            --pinkshadow : #ffcbdd;
            --darkwhite : #cecaca;
        }
      
        .wrap__music {
            display: flex;
            justify-content: center;
              height: calc(100vh - 6rem);
            user-select: none;
			    align-items: center;
        }
        .music__inner {
            width: 90%;
            padding: 0 30px 20px;
            position: relative;
        }
        .music__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .music__top i {
            font-size: 30px;
            color: var(--lightblack);
        }
        .music__top h3 {
            font-size: 18px;
            color: var(--lightblack);
            font-weight: 500;
        }
        .music__img {
		   width: 80%;
			overflow: hidden;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			border: 5px solid #fff;
        }
        .music__img img {
            width: 100%;
            height: 100%;
            vertical-align: top;
            object-fit: contain;
        }
        .music__song {
            text-align: center;
            margin: 3rem 0 0;
			height:7rem
        }
        .music__song p {
            color: #fff
        }
        .music__song .name {
            font-size: 3rem;
			font-weight:900
        }
        .music__song .artist {
            font-size: 2rem;
            opacity: 0.9;
            font-weight: 300;
			margin-top:1rem
        }
        .music__progress {
            height: 6px;
            width: 100%;
            border-radius: 10px;
            background: #372276;
            cursor: pointer;
			position:relative;
			margin-top:6rem
        }
        .music__progress .bar {
            height: inherit;
            width: 0%;
            position: relative;
            border-radius: inherit;
            background: #4d38e7;
        }
        .music__progress .timer {
            margin-top: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--lightblack);
            font-size: 0.9em;
            pointer-events: none;
        }
        .music__control {
            display: flex;
            align-items: center;
            justify-content: space-between;
			position:relative
        }
        .music__control i {
            font-size: 4rem;
            user-select: none;
            background: #fff;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .music__control .play-pause {
            width: 54px; height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            z-index: 1;
        }
        .music__control .play-pause::before {
            content: '';
            position: absolute;
            width: 40px; height: 40px;
            border-radius: inherit;
            z-index: -1;
        }
        .music__control .play-pause #control-play {
            opacity: 0.8;
        }
       

#control-repeat {position:absolute; top:-3.5rem ; right:.5rem; font-size:3rem}
#control-list {position:absolute; top:-3.5rem ; left:.5rem; font-size:3rem}

svg path,
svg rect{
  fill: #fff;
}

.wrap__music .music__control .play-pause #control-play {background: url(../img/play.png)no-repeat;background-size: 100%;font-size:6rem}
.wrap__music.paused .music__control .play-pause #control-play {background: url(../img/stop.png)no-repeat;background-size: 100%;}



.noise_wrap {height: 4rem; margin-bottom: 2rem;animation:none}
.paused .noise_wrap {}

.noise{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.noise > span{
    width: 2px;
    height: 15px;
    margin: 0 1px;
    border-radius: 3px;
	background:#636363;
	opacity:.5
}
.paused .noise > span:nth-child(5){
    background: #cb22d2;
    animation: anim 0.7s infinite;
}
.paused .noise > span:nth-child(4){
    background: #831fcd;
    animation: anim1 0.8s infinite;
}
.paused .noise > span:nth-child(3){
    background: #2223b9;
    animation: anim2 0.9s infinite;
}
.paused .noise > span:nth-child(2){
    background: #1870f3;
    animation: anim3 1s infinite;
}
.paused .noise > span:nth-child(1){
    background: #1ec5ff;
    animation: anim4 1.1s infinite;
}
@keyframes anim{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim1{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim2{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim3{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim4{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
.paused .noise > span {background:#fff !important; opacity:.7}