:root {
    --color-text-title: rgba(124, 0, 87, 1);
    --main-bgc-white: rgb(255, 255, 255, 1);
    --font-family-title: 'Rock Salt', cursive;
    --font-family-fill: 'Inter', sans-serif;
    --color-text-main: black;
    --main-bgc-items-main: rgba(255, 255, 255, 0.8);
    --font-family-title-main: 'Playfair Display', serif;
    --color-player-btn: rgba(151, 71, 255, 1);
    --fond-main:black;
    --size-text-36: 36px;
    --size-text-32: 32px;
    --size-text-24: 24px;
    --size-text-20: 20px;
    --size-text-14: 14px;
    --with-item-320: 320px;
}




*, p, footer{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container1 {
    background-color: rgb(7, 4, 16);

    background-image: url(imgs/fond.png);
    /* height: 100vh; */
    /* min-height: 800px ; */
   transition: background-color 5s;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    background: var(--main-bgc-white);
    color: var(--color-text-title);
    font-size: var(--size-text-36);
    font-family: var(--font-family-title);
}

.title_footer {
    color: var(--color-text-title);
    font-size: 16px;
    font-family: var(--font-family-title);
}

.text_footer {
    color: var(--color-text-main);
    font-size: 10px;
    font-family: var(--font-family-fill);
}

footer {
    height: 80px;
   background: var(--main-bgc-white);


}

.icon_footer {
    height: 37.5px;
    width: 37.5px;
}


/*                     main                        */

main {

    position: relative;
    /* height: calc(100vh - 90px - 80px); */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:center;
    
}

.nav_player {
    width: 100%;
}



/* .fond {
    width: 100vmax;
    height: 100vmax;
    position: absolute;
    background-image: url(imgs/fond.png);
    /* z-index: 0; */
    /* transform: scale(1.5);
    transform: rotate(90deg); 
} */

.list_musique {
    width: var(--with-item-320);
    background-color: var(--main-bgc-white);
   

}

.list_item_musique {
    display: flex;
    flex-direction: column;
   height: calc(100vh - 90px - 80px - 60px - 25px );
   min-height: 425px;
   /* max-height: calc(100vh - 90px - 80px - 120px - 5px); */
    overflow: auto;
}

.style_item_list {
    padding: 5px 15px;
    border-bottom: 1px solid black;
    color: var(--color-text-main);

}

.item_musique {
    display: flex;
    flex-direction: column;
    
    font-family: var(--font-family-fill); 
    font-weight: 400;
   
    
}

.title_item_musique {
    font-size: var(--size-text-20);
    cursor: pointer;
}

.props_item_musique {

    display: flex;
    justify-content: space-between;
    font-size: var(--size-text-14);

}

.props_item_musique >img:hover{
    transform: scale(1.3);
}

.title_text_main {
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: var(--size-text-24);
    font-family: var(--font-family-title-main);
    font-weight: 600;
    /* text-align: center; */
    height: 60px;
    width:var(--with-item-320);
    background-color: var(--main-bgc-items-main);
   
    /* line-height:60px; */
}

.title_text_main1 {
    display: none;
    justify-content:center;
    align-items: center;
    font-size: var(--size-text-24);
    font-family: var(--font-family-title-main);
    font-weight: 600;
    /* text-align: center; */
    height: 60px;
    width:var(--with-item-320);
    background-color: var(--main-bgc-items-main);
   
    /* line-height:60px; */
}


.div_search {
    height: 60px;
    display: flex;
    align-items: center;

}

.search {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    background-color: #EFECEC;
    border-radius: 15px;
    padding: 0 10px;
    font-size: var(--size-text-14);
    font-family: var(--font-family-fill);
    
}

.search_icon {
    position: absolute;
    right: 20px;
}

/*          filtre         */


.text_filtre {
    color: var(--color-text-main);
    font-size: var(--size-text-20);
    font-family: var(--font-family-fill);
    font-weight: 400;
    
}

.title_filtre {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    font-size: var(--size-text-24);
    font-family: var(--font-family-title-main);
    font-weight: 600;
    width:320px;
    background-color: var(--main-bgc-items-main);
    padding: 5px 20px;
   
}

.bgc{
    background-color: var(--main-bgc-items-main);
}

.duration_musique {
    width: 100%;
}

.btn_filtre_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 60px;
    border-radius: 30px;
    background-color: var(--main-bgc-items-main);
    font-size: var(--size-text-24);
    font-family: var(--font-family-fill);
    font-weight: 500;
    border: solid 1px;
    margin:20px auto;
    margin-left: 60px;
    
}

/*            player             */


.player {
    height: calc(100vh - 90px - 80px - 60px);
    min-height: 450px;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}




/*            title song              */
.title_player {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
    min-height: 80px;
    /* height: 80px; */
    border-radius: 15px;
    background-color: var(--main-bgc-items-main);
   
    margin-bottom: 20px;
}
.title_song {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 80px; */
    font-size: var(--size-text-32);
    font-family: var(--font-family-title);
    font-weight: 400;
    color: var(--color-text-title);
    padding-top: 5px;
    
}

.author_song {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    /* height: 80px; */
    font-size: var(--size-text-20);
    font-family: var(--font-family-title);
    font-weight: 400;
    color: var(--color-text-title);
    padding-right: 10px;
    padding-bottom: 5px;
}

/*             motor             */

.motor {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
   max-width: 600px;
   
   min-height:350px;
    /* height: 400px; */
    border-radius: 30px;
    background-color: var(--main-bgc-items-main);
    font-size: var(--size-text-32);
    font-family: var(--font-family-fill);
    font-weight: 400;
    color: var(--color-text-main);
    z-index: 1;
}

.btn_choice_list {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    
   
}

#btn_my_list, #btn_all_list {
    display: none;
}





#btn_all_list:checked ~ .btn_all_list {
    background-color: var(--color-player-btn);
}

#btn_my_list:checked ~ .btn_my_list {
    background-color: var(--color-player-btn);

}

/* .btn_my_list:hover, .btn_all_list:hover {
   background-color: var(--color-text-title);
} */



/*               track           */




.track_line {
    position: relative;
    width: 80%;
    height: 10px ;
    /* align-self: start; */
    background-color: rgb(88, 87, 87);
    border-radius: 10px;
    /* margin-left: 5%; */
    
}

.track_circle {
    position: absolute;
    top: -10px;
    /* left: -25px; */
    left: 0;
    width: 30px;
    height: 30px ;
    background-color: var(--color-player-btn);
    border-radius: 50%;
    cursor: pointer;
    
}

.track_line_red {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 10px ;
    border-radius: 10px;
    background-color: var(--color-text-title);
      
}

.track_time {
    position: absolute;
    /* width: 40px ; */
    top: -30px;
    left: 0px;
}

.track_time_total {
    position: absolute;
    /* width: 40px ; */
    top: -30px;
    right: 0px;
}

/*                 nav_track              */


.nav_track_menu {

    width:80% ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 30%;
    
}

.nav_track {

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    
}

.active_nav_track {
    background-color: rgb(230, 161, 227);
    border-radius: 50%;
    /* transform: rotate(45deg); */

}

.nav_track img:hover {
    transform: scale(1.2);
}


.nav_track img:hover {
    cursor: pointer;
}

.volume {
    position: relative;
}

.volume1 {
    position: relative;
    display: none;
}

.block_volume {
    position: absolute;
    /* display: none; */
  width: 240px;
    left: -55px;
    top: -20px;
    transform: rotate(-90deg);

}

.volume_musique {
    width: 100%;
}

.block_volume :first-child {
   position: absolute; 
   top: -5px;
   right: 0px;
   transform: rotate(90deg);
   color: var(--color-text-main);
    font-size: var(--size-text-14);
    font-family: var(--font-family-fill);
    font-weight: 400;
}

.block_volume :last-child {
    position: absolute; 
    top: 0px;
    left: 0px;
    transform: rotate(90deg);
    color: var(--color-text-main);
     font-size: var(--size-text-14);
     font-family: var(--font-family-fill);
     font-weight: 400;
}


/*              for help              */

.cursor_pointer {
    cursor: pointer;
}

.display_none {
    display: none;
}

.display_block {
    display: block;
}

.display_hidden {
   visibility: hidden;
}

.item_musique_active{
    background-color: rgb(230, 161, 227);;
}

@media screen and (max-width: 660px) {
    :root {
        --with-item-320: 250px;
        --size-text-36: 28px;
        --size-text-32: 20px;
        --size-text-24: 16px;
        --size-text-20: 14px;
        --size-text-14: 12px;
    }

    .title_text_main {
        display: none;
    }

    .title_text_main1 {
        display: flex;
        width:auto;
    }

    .player {
        width:90vw;
    }

    .nav_track_menu {

        width:96% ;
    }

    .volume {
        display: none;
    }

    .volume1 {
        display: flex;
        align-items: center;
        align-self: flex-start;
        margin-left: 5%;
        margin-bottom: 20px;
        
    }

    .block_volume {
       position: relative;
        /* display: none; */
        width: 65vw;
        left: 0px;
        top: 0px;
        transform: rotate(0deg);
        margin-left: 10px;
    }
    
    .volume_musique {
        width: 100%;
    }
    
    .block_volume :first-child {
       position: absolute; 
       top: -10px;
       right: 0px;
       transform: rotate(0deg);
       color: var(--color-text-main);
        font-size: var(--size-text-14);
        font-family: var(--font-family-fill);
        font-weight: 400;
    }
    
    .block_volume :last-child {
        position: absolute; 
        top: -10px;
        left: 0px;
        transform: rotate(0deg);
        color: var(--color-text-main);
         font-size: var(--size-text-14);
         font-family: var(--font-family-fill);
         font-weight: 400;
    }

    .btn_choice_list {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }

    .btn_filtre_submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30vw;
        height: 40px;
        border-radius: 15px;
    }

    footer {
        height: auto;
    }
}