/* player menu */
.bottom-player{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: solid rgb(0, 0, 0) 1px;
    height: 150px;
    overflow: hidden;
    background-color: rgb(27, 27, 27);
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.player-img-div{
    width: fit-content;
    padding-right: 25px;
    padding-bottom: 25px;
}

.player-img-div img:hover{
    outline-offset: 2px;
    transition: 500ms;
}
.player-img-div img{
    margin-left: 25px;
    margin-top: 25px;
    width: 150px;
    height: auto;
    min-height: 112.5px;
    outline: 2px black solid;
    border-radius: 5px;
    outline-offset: 0px;
}

.controls{
    width: 40%;
    height: 120px;
    position: absolute;
    left: 0;
    transform: translateX(75%);
    display: flex;
    justify-content: center;
    gap: 10px;
}


.controls div img:hover{
    background-color: rgb(15, 15, 15);
    transition: 100ms;
    filter: invert();
    transform: scale(1.1);
}
.controls div img{
    /* width: auto; */
    width: 40px;
    align-self: center;
    margin-top: 25px;
    /* background-color: rgb(35, 35, 35); */
    border-radius: 10em;
    /* outline: 4px solid black; */
    /* outline-offset: -4px; */
}
.time-elem{
    width: 80%;
    color: white;
    
}
.time-wrapper{
    position: absolute;
    display: flex;
    width: 30%;
    bottom: 25px;
    left: 35%;
}
.time-wrapper .left{
    width: 10%;
    color: white;
    margin-left: 3%;
}
.time-wrapper .right{
    color: white;
    width: 10%;
    margin-left: 3%;
}

.controls nav{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 10%;
    bottom: 0;
    color: white;
}
.controls nav .left{
    position: absolute;
    left: 5%;
    bottom: 70%;
}
.controls nav .right{
    position: absolute;
    right: 5%;
    bottom: 70%;
}





.smaller{
    width: 35px !important;
    transform: translateY(4px);
    filter: invert();
}
.smaller:hover{
    filter: invert(0);
    background-color: rgb(107, 107, 107)!important;
}
.infos{
    /* border: blue 1px solid; */
    align-self: center;
    height: 100px;
    width: 15%;
    cursor: default;

}

.infos .title{
    white-space: nowrap;
    color: rgb(185, 185, 185);
    font-size: 120%;
}
.infos .artist{
    font-size: 100%;
    white-space: nowrap;
    color: rgb(72, 31, 255);
}

/* player menu */

.smaller.selected{
    background-color: rgb(107, 107, 107);
    filter: invert(0);
}

/* .sound-hov:hover{
    background-color: rgb(0, 0, 0);
} */
/* .sound-wrap:hover{
    width: 55%;
}
.sound-hov:hover .sound-wrap{
    width: 55%;
}

.sound-wrap:hover .soundBar{
    width: 100%; 
}
.sound-hov:hover + .sound-wrap .soundBar{
    width: 100%;
    transition: 300ms;
} */
/* .sound-wrap input[type=range]{
    align-self: center;
    transition: 300ms;
    width: 0;
    border: 1px solid blue;
}
.sound-wrap{
    align-self: center;
    height: 20px;
    justify-content: flex-start;
    display: flex;
    border: 1px solid blue;
    width: 0;
} */
/* .sound-hov:hover{
    background-color: rgb(185, 185, 185);
} */


.sound div:hover{
    width: 55%;
}

.sound-hov:hover + div{
    width: 55%;
    transition: 250ms;
}


.sound div input[type=range]{
    width: 100%;
    align-self: center;
}
.sound div{
    height: 30px;
    width: 0;
    align-self: center;
    display: flex;
    transition: 250ms;
}


.sound{
    width: 15%;
    height: 120px;
    position: absolute;
    right: 0;
    transform: translateX(-10%);
    display: flex;
    justify-content: flex-start;
}
.sound img{
    /* padding-left: 15px; */
    margin-left: 15px;
    align-self: center;
    height: 40px;
    width: auto;
    filter: invert(.6);
}
.sound img:last-of-type{
    height: 30px !important;
}
.sound img:first-of-type:hover{
    background-color: rgb(185, 185, 185);
    border-radius: 1em;

}