html {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #c9ced3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
}


#main-container{
  width:400px;
  height:500px;
  background-color: #e7e7e7;
  border-radius: 10px;
  box-shadow: 0px 15px 35px 5px rgba(0,0,0,0.3);
}

#music-image{
  width:70%;
  height:50%;
  margin: auto;
  position: relative;
  top: -10%;
  box-shadow: 0px 15px 35px 5px rgba(0,0,0,0.3);
  border-radius: 10px;
}

#music-image img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.music-details{
  margin: auto;
  text-align: center;
  position: relative;
  top: -5%;
}

#music-name{
  font-weight: 900;
  font-size: 30px;
  margin-bottom: 0px;
}

#singer-name{
  font-size: 14px;
  margin: 0px;
}

.music-details audio{
  width:280px;
  height: 40px;
}

.progress-container{
  width:100%;
  height: 40px;
  
}

.duration-wrapper{
  display: flex;
  justify-content: space-between;
  margin:0px 10% 1% 10%;
}

#progress-bar{
  width:80%;
  height:5px;
  background-color: white;
  margin: auto;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#progress{
  width:0%;
  height:100%;
  background-color:black;
  border-radius: 5px;
}

.button-container{
  height:100px;
  width:100%;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}



.bx{
  font-size: 40px;
  margin: 0px 10px 0px 0px;
}

.bx:hover{
  color: rgb(116, 106, 106);
}

@media screen and (max-width:450px){
  #main-container{
    margin:0px 20px 0px 20px;
  }
}