* {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 100%;
            user-select: none;
            color: white;
            background: rgb(14, 14, 14);
            overflow-x: hidden;
        }
        #dontcare {
            display: none;
        }
        .music {
            aspect-ratio: 1 / 1.2;
            width: clamp(340px,50vw,400px);
            background: linear-gradient(#0002 40%,rgba(0,0,0, 1));
            outline: 50px solid #0000;
            
            backdrop-filter: blur(30px);
            box-shadow: 0px 4px 15px 1px #2224;
            margin-right: auto;
            margin-left: auto;
            margin-top: 10vh;
            display: grid;
            grid-template-rows: .4fr 5.2fr .71fr .5fr 2fr;
        }
        :root {
            --w: clamp(340px,50vw,400px);
        }
        .backEffect {
            position: absolute;
            text-align: center;
            display: grid;
            place-items: center;
            top: calc(10vh + 32px);
            margin-left: 50%;
            transform: translate(-50%);
            z-index: -2;
            width: calc(var(--w) - 64px);
        }
        .backEffect .back {
            width: 100%;
            aspect-ratio: 1 / 1.2;
            object-fit: cover;
            background-image: url('pics/preload.png');
        }
        .topBars {
        }
        @keyframes fade {
            0% {
                opacity: 0;
            } 100% {
                opacity: 1;
            }
        }
        .song-name {
            font-size: 1rem;
            font-weight: 500;
            color: rgba(235, 235, 238, 0.91);
            font-family: sans-serif;
            padding: 4px;
            padding-left: 20px;
        }
        .image {
            text-align: center;
            display: grid;
            place-items: center;
        }
        .image > img {
            object-fit: cover;
            width: 64%;
            aspect-ratio: 1 / 1;
            box-shadow: 0px 4px 14px 4px #0004;
            animation: fade 2s ease;
        } 
        .controls {
            display: grid;
            grid-template-columns: repeat(3,1fr); 
            

        }
        .ctlBtn {
            width: 100%;
            display: flex;
            color: #fff3f3;
        }
        .iconM:active {
            opacity: .7;
        }
     .ctlBtn:nth-child(2):active {
            opacity: .7;
        }
        .ctlBtn:nth-child(1) {
            justify-content: right;
            align-items: center;
            transition-duration: .1s;
        }
        .ctlBtn:nth-child(2) {
            justify-content: center;
            align-items: center;
        }
        .fa-pause, .fa-play {
            color: #111;
            background: #fff3f3;
        }
        .fa-pause {
            position: relative;
            padding: 12px 17px;
            border-radius: 50%;
        }
        .fa-play {
            position: relative;
            padding: 12px 13px;
            padding-left: 18px;
            border-radius: 50%;
        }
        .ctlBtn:nth-child(3) {
            justify-content: left;
            align-items: center;
        }
        .iconM {
            font-size: 1.7rem;
        }
        .duration {
            color: #bcbdca;
        }
        #seekSlider {
          width: 100%;
          -webkit-appearance: none;
          appearance: none;
          height: 2px;
          background: #3237488f;
          outline: none;
          transition: 0.4s;
          outline: 10px solid transparent;
        }
      
        #seekSlider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 10px;
          aspect-ratio: 1 / 1;
          background: #fff3f3;
          border-radius: 50%;
          cursor: pointer;
          transition: .7s;
        }
        #seekSlider::-webkit-slider-thumb:active {
            outline: 3px solid gray;
        }
        #seekSlider::-moz-range-thumb {
          width: 15px;
          height: 15px;
          background: #fff3f3;
          border-radius: 50%;
          cursor: pointer;
        }
        .range {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            display: grid;
            grid-template-rows: 1fr 1fr;
            place-items: center;
        }
        .time-stamp {
            width: 100%;
           display: flex;
           flex-direction: rows;
           justify-content: space-between;
        }
        .loading {
            position: absolute;
            border: 3px solid #fff3f3;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            color: #000;
            padding: calc(1.7rem - 2px);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            animation: loading 1s infinite linear;
            z-index: -1;
            transition: .2s;
        }
        .loading {
            display: none;
        }
        @keyframes loading {
            from {
                transform: rotate(0deg);
            } to {
                transform: rotate(360deg);
            }
        }
        .ctlBtn:nth-child(2) {
            position: relative;
        }