*{
    margin:0;
    padding:0;   
}

.pcontainer{
    width:100%;
    height:150px;
    background:#58B19F;
    margin: 50px auto;
    text-align: center;
    top:2px;
    position: fixed; 
    overflow: hidden;
    
}

.pcontainer span{
    color:#192a56;
    font-size:18px;
    font-weight:500;
    text-align:center;
}

.lcontainer{
    width:100%;
    height:auto;
    margin-top:220px;  
}

#playlist{
     list-style: none;
}

#playlist li{
    padding:8px;
    margin:0 20px;
    
}

#playlist li a{
  color:#2f3640;
  text-decoration:none;
  margin-left:20px;
  font-size: 20px;
  font-weight:lighter;
}

#playlist li a:hover{
    color:#c23616;
    font-weight: bold;
}

#playlist .current-song a{
    color:blue;
}

.lcontainer li:nth-child(odd)
 { 
    background:#dcdde1; 
    color:red;
}

audio { 
  width:75%; 
  margin:0 auto;
  box-shadow: 5px 5px 20px rgba(0,0,255,0.3);
  transform: scale(1.05);
}

@media screen and (max-width: 700px){
    
    .pcontainer{
      width:100%;
      height:170px;
    }
    
    .pcontainer span{
        font-size:18px;
    }
    
    #playlist li a{
     font-size: 15px;
     font-weight:lighter;
    }
    
    .lcontainer{
    margin-top:250px;
    } 
    
}

@media screen and (max-width: 420px){
    
    .pcontainer{
      width:100%;
      height:220px;
    }
    
    .pcontainer span{
      font-size:18px;
      font-weight:600;
    }
    
     #playlist li a{
     font-size: 15px;
     font-weight:500;
    }
    
    .lcontainer{
      margin-top:300px;
    } 
}