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

body {
    font-family: "Montserrat", sans-serif;
    font-size:12px;
}


main {
    height: calc(100vh - 100px);
    display: flex;
}
/**************************************************
MAIN-COLONNA
***********************************************/

.container-column {
     color: white;
    background-color: black;
    width:200px;
    font-size:0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logo {
    width: 60%;
    margin: 20px;

}

ul {
    list-style-type: none;
   
}

.name-playlist li{
    margin-top:5px;
  
}

a {
    text-decoration: none;
    color: white;
    margin:10px;
}
a img{
    width:12px;
}
.img-icons{
    width:20px;
    margin-right: 5px;
   
}
.sidebar-bottom p{
    display:flex;
    align-items:center;
    margin:5px;
    padding:10px;
    

}
.icon-add{
    background-color: grey;
    width:20px;
}
.install{
    border-bottom:1px solid;
    cursor:pointer;

}
.profile{
    font-size:14px;
    font-weight: bolder;
    color: white;
   
}
.profile .img-icons{
    background-color: gray;
    border-radius:50%;
}


/**************************************************
HEADER-MAIN
****************************************************/


.header-button {
    display: flex;
    justify-content: flex-end;
    background-color:#00030F ;
    position:sticky;
    top:0;
}

.button {
    background-color: #080F21;
    color: white;
    border-radius: 25px;
    padding: 10px 40px;
    border-color: white;
    margin: 20px;
    
}
/**********************************************
MAIN-CENTRALE
************************************************/

.container-main {
    background-color: #080F21;
    flex-grow: 1;
    overflow-y: scroll ;
}
.container-playlist {
    background-color: #080F21;
    color: white;
    margin-top:10px;
}

.container-playlist ul{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
}

.container-playlist li {
    padding: 10px;
}
.cards-top{
    display:flex;
    flex-wrap:wrap;
    margin-left:10px;


}
.card-items img{
    width:150px;
   
}
.card-items p{
   text-align: center;
    color: white;
    font-size: 12px;
  
}
.card-items .text-grey{
    color:grey;
    font-size:10px;
    text-align: center;
}
.card-items div{
    position:relative;
}
h3{
    color:white;
    margin:30px 10px;
   
}
.cards-bottom{
    display:flex;
    justify-content:flex-start;
    margin-left:10px;
}
.card-items{
    margin:20px 10px;
    cursor:pointer;
    width:150px;
}
p{
    color:grey;
    font-size:10px;
    margin:10px;
    margin-bottom:10px;
}


.with-subtitle{
    color:white;
    margin:30px 10px 10px;
}
.icona-rotonda{
    border-radius:50%;
}

/*********************************/
/* HOVER PLAY SU CARD */

.play-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    opacity:0;
    pointer-events: none;
    width:60px;
}
.card-items:hover img{
    filter: brightness(70%);
}
.card-items:hover .play-icon{
    opacity:1;
}
/*************************************************/



/***********************************************
FOOTER
*************************************************/

footer {
    height: 100px;
    background: #191A18;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.album{
    display:flex;
    align-items:center;
}

.img-footer {
   margin:10px;
   display:flex;
   align-items:center;
}
figure img{
    width:50px;
}
.img-footer figcaption {
    color:white;
    padding:10px;
    font-size: 10px;
}
strong{
    margin-left:10px;
    }

.player i{
    color:white;
    margin:10px;
}
.player-icon {
  display: flex;
  align-items: center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;

}
.player .progress-bar {
  flex-grow: 1;
  accent-color: white;
  height: 5px;
  border-radius: 2px;
  margin: 0 5px;
  width:200px;

}
.time{
    color:white;
    font-size: 0.45rem;
}
.volume{
    
      gap: 10px;
      display:flex;
      align-items:center;
}
.icon{
    width:17px;
}
figcaption .text-grey{
    color:grey;
}
.volume .progress-bar {
  flex-grow: 1;
  accent-color: white;
  height: 5px;
  border-radius: 2px;
  margin: 0 5px;

}
/*************************************
HOVER TEXT-GREY E BOTTONE
********************************/
.text-grey{
    color:grey;
    cursor:pointer;
}
 a.text-grey:hover{
    
    color:white;
}
.install:hover{
    color:white;
}
button:hover {
  transform: scale(1.2);
  transition: transform 0.2s;
}
.album.icon:hover{
    color:white;
}