.listening {
    width:fit-content;
    font-size: clamp(0.7rem, 3vw, 0.7rem); 
    font-family: Lexend Mega Variable;

    border: var(--color-light-pink) solid 2px;
    border-radius: 100px;
    margin-left:auto;
    margin-right:auto;
    background: linear-gradient(0deg, rgb(192, 159, 184) 0%, rgb(228, 198, 224) 30%, rgb(255, 240, 251) 100%); 
    /* background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box; */
    padding:5px;
    
    color:#A3A3A3;
}

.listening--content {
    padding:5px;
    width:290px;
    display:flex;
    margin:auto; 
    border-radius:0em;
}

.listening a {
    color: var(--color-grey-black);
}

.listening a:hover {
    letter-spacing: 0;
    text-shadow: 0px 0px 2px var(--color-purple), 2px 2px 6px var(--color-purple);
}



.listening--cover {
    height:100px;
    width:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:auto;
    background: linear-gradient(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
    box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    position: relative;
}

.listening--cover img {
    margin:auto;
    border-radius: 50em;
    animation: spinCD 8s linear infinite;
    transition: transform 0.2s ease;
}

.listening--cover img:hover {
    animation-play-state: paused;
    transform: scale(1.15); 
}

#album-cover {
    height: 100px;
    width: 100px;
    z-index: 1; 
    object-fit: cover; 
}

#cd-center {
    position: absolute;
    height: 25px; 
    width: 25px;
    z-index: 2; 
}

.listening--infos {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    float:right;
    /* background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box; */
    background-image: url("../images/site/notes_background.jpg");
    background-repeat: repeat;
    background-size: cover;
    border-radius: 60em;
    border: 2px solid transparent;
    margin-left:8px;
    box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}   

#track {
    padding:25px;   
    color:#A3A3A3;
    padding-bottom:0;
    padding-top: 0;
    margin-left:25px;
    margin-right:25px;
    display:block;
}

#artist {
    font-size: 0.6rem;
    padding-bottom: 10px;
}

#date {
    font-size: 0.5rem;
}

.listening--slider {
    width: 135px;
}


@keyframes spinCD {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}