/*-- Basic stuff --*/

body {
  background: none;
    margin: 0;
    color:#801543;
          }

#mcont { width: 285px; height: 277px; border: none;}

/*--Music player css--*/

@font-face {
          font-family: 'Cute Bubble';
          src:url(/resources/font/CuteBubble.otf);
    
}

.music-body {
    height: auto;
    margin: 0;
    font-family:  'Cute Bubble';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}




.music-info {background-color: hotpink;
    position: relative;
    font-family: 'Cute Bubble';
    font-size: 13px;
    line-height: 18px;
    height: 85px;

}

marquee {margin-top: -14px;
    width: 100%;
    font-size: 14px; color:#801543;}

hr {margin: 0;
    margin-top: -15px;
    border-top-color:hotpink;
    border-bottom-color: hotpink;}


#deets 
   {margin-top: 2px;
    margin-left: 73px;
    text-align: left;
    width: 260px;
}

.img-container {box-sizing: border-box;
    width: 60px;
    z-index: 99;}

.img-container::after {content: '';
    background-image: '';
    height: 60px;width: 60px;
    transform: translate(50%, 50%);}

.img-container img {
    box-sizing: border-box;
    width: inherit;
    height: 60px;
    position: absolute; top: 25px; left: 5px;
    object-fit: cover;
    border: 1px solid hotpink;
    border-bottom-color:hotpink;
    border-radius: 3px;
    animation: rotate 3s linear infinite;
    box-shadow: 5px 5px 0px hotpink, -5px 5px 0px hotpink;
    animation-play-state: paused;
}

.music-container.play { animation-play-state: running;}

.navigation { background: hotpink ;
    padding-top: 4px; }

.navi {display: flex
    ; align-items: center;
    justify-content: center;
    font-family: 'Cute Bubble'}

.action-btn {background: none;
    border: 0;
    margin: 0;
    margin-top: 3px;
    padding: 0;
    display:inline-block; font-size: 0;}

.progress-container {
    background-color: #84E9FF;
    border-radius: 3px;
    border: 1px solid #84E9FF;
    border-bottom-color:#84E9FF;
    height: 5px;
    width: 100%;
    z-index: 2;
    margin: auto;
    width: 90%;   }

.progress {
    background-color:#FFF57F;
    float: left;
    object-fit: cover;
    border-radius: 0px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;z-index: 2;
    position: relative;}

.playlist {
  font-family:  'Cute Bubble';
    font-size: 11px;
    text-align: left;
    width: 100%;
    height: 139px;
    color:#801543;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #FFB0DB;
    border: none;
    font-family:  'Cute Bubble';
    z-index: 1;
}

.playlist ul, .playlist li {
    width: 100%;
    margin-left: -7px;
    margin-top: 3px;
    list-style-type: none;
    font-family:  'Cute Bubble';
    
}

.playlist li {
    font-size: 12.5px;
    width: 100%;
    margin-left: -20px;
  
}

.playlist li:hover {
    background: rgba(255, 105, 176, 0.53);
}

.activeSong {
    background: rgba(255, 105, 176, 0.53);;
}

.trackDuration {
   
    float: right; margin-right: 20px; margin-top:-15px;
    font-size: 10px;
}

.trackInfo {
    display: inline-block;
    width: 100%;
    word-wrap: break-word;
    margin-left: -5px;
}

.rotate-anim:hover {
    animation: rotateBackAndForth 5s ease infinite;
    animation-play-state: running;
}

@keyframes rotateBackAndForth {
    33% {transform: rotate(30deg)}
    66% {transform: rotate(-30deg)}
    
}

            /* width */
        ::-webkit-scrollbar {
          width: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
          background: #84E9FF;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
          background: #FFF57F;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
          background: #FFF57F;
        }