body{
    text-align: center;
    justify-content: center;
    justify-items: center;
    color: white;
    background-color: #040303;
}
audio{
    margin: 0 auto;
    visibility: hidden;
}

.player{
    margin-top: 5rem !important;
    position: relative;
}

.background{
    width: 96%;
}

h3{
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-weight: 500;
}


.slider {
width: 90%;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;

}
.slider p {
font-size: 12px;
font-weight: 600;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: rgb(37, 37, 37);
}
.slider input[type="range"] {

-webkit-appearance:none !important;
height: 0.5px;
background: black;
border: none;
outline: none;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 10px;
height:10px;
background: rgb(247, 218, 218);
border: 2px solid rgb(37, 37, 37);
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: rgb(37, 37, 37);
}

.next:hover  , .play:hover , .prev:hover{
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transition-duration: 0.2s;
}

.play:hover{
    animation-name: spin;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-delay: 0ms;
}

.next:hover {
    animation-name: moveing;
    animation-duration: 0.4s;
    animation-delay: 0ms;
    animation-fill-mode: forwards ;
}

.prev:hover{
    animation-name: move_back;
    animation-duration: 0.4s;
    animation-delay: 0ms;
    animation-fill-mode: forwards
}

.trans{
    animation-name:  sm;
    animation-duration: 0.3s;
}

.back_color{
    animation-name: back_color;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes sm {
    from{ transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); }
    to{ transform: scale(1 , 1); -webkit-transform: scale(1 , 1); -moz-transform: scale(1 , 1); -ms-transform: scale(1 , 1); -o-transform: scale(1 , 1); }
}

@keyframes spin{
    from{ transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
    to{  transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); }
}

@keyframes moveing{
    from{ transform: translate( 0 , 0); -webkit-transform: translate( 0 , 0); -moz-transform: translate( 0 , 0); -ms-transform: translate( 0 , 0); -o-transform: translate( 0 , 0); }
    to{ transform: translate( 2px , 0px); -webkit-transform: translate( 2px , 0px); -moz-transform: translate( 2px , 0px); -ms-transform: translate( 2px , 0px); -o-transform: translate( 2px , 0px); }
}

@keyframes move_back{
    from{ transform: translate( 0 , 0); -webkit-transform: translate( 0 , 0); -moz-transform: translate( 0 , 0); -ms-transform: translate( 0 , 0); -o-transform: translate( 0 , 0); }
    to{ transform: translate( -2px , 0px); -webkit-transform: translate( -2px , 0px); -moz-transform: translate( -2px , 0px); -ms-transform: translate( -2px , 0px); -o-transform: translate( -2px , 0px); }
}

@keyframes back_color{
    25% { background-color: rgb(255, 122, 122); 
    }
    50%{ background-color: rgb(86, 202, 193);
    }
    75% {background-color: rgb(255, 99, 182);
    }
    90%{ background-color: rgb(99, 206, 102);}

}