* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.music{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.music h2{
  margin:20px auto;
  border-radius:20px;
  padding:10px;
   box-shadow: -10px -10px 15px#fff,
                10px 10px 15px rgba(0,0,0,0.1),
                inset -5px -5px 15px #fff,
                inset 5px 5px 15px rgba(0,0,0,0.1) ;

  }
.title {
    width:60vw;
    font-weight: 400;
    font-size: 20px;
    color:coral;
    text-align: center;
    margin-bottom: 20px;
}

.player {
    position: relative;
    width: 90vw;
    background:#fbfbfb;
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 10px 30px;
    box-shadow: -10px -10px 15px#fff,
                10px 10px 15px rgba(0,0,0,0.1),
                inset -5px -5px 15px #fff,
                inset 5px 5px 15px rgba(0,0,0,0.1) ;
}

.btns {
    /* position: relative; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* background: red; */

}
.btns div {
    position: relative;
    width: 50px;
    height:50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    cursor: pointer;
    box-shadow: inset 0 -5px 5px rgba(0,0,0,0.1),
                      0 5px 10px rgba(0,0,0,0.1),
                      0 10px 15px rgba(0,0,0,0.1);

}
.btns div:active,
.btns div.active
 {
    color:coral;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.15),
                inset 0 2px 5px rgba(0,0,0,0.15);
}

.btns .playPause {
    height: 50px;
    width: 50px;

}
.btns .material-icons {
    font-size: 2em;

}
.btns .playPause span {
    font-size: 3em;
}
.bk{
  padding:10px 19px;
  margin:40px auto;
  margin-bottom:60px;
  width:90vw;
  height:700px;
  border-radius:15px;
  box-shadow: -10px -10px 15px#fff,
               10px 10px 15px rgba(0,0,0,0.1),
               inset -5px -5px 15px #fff,
               inset 5px 5px 15px rgba(0,0,0,0.1) ;

  }
.an{
   display:flex;
   float:left;
   margin:3.5%;
   width:17.5%;
   height:50px;
   border-radius:15px;
   text-align:center;
   line-height:50px;
   box-shadow: -10px -10px 15px#fff,
                10px 10px 15px rgba(0,0,0,0.1),
                inset -5px -5px 15px #fff,
                inset 5px 5px 15px rgba(0,0,0,0.1) ;
  }
.an a{
  color:black;
  text-decoration:none;
  display:block;
  width:100px;
  height:50px;
  border-radius:25px;
  }

.an a:active{
  color:red;
  background-color:#ffd796;
  }

hr{
  width:90%;
  clear:left;
  margin:auto;
  }

.list-img {
	width: 100%;
	margin: 40px auto;
    margin-top:50px;
}
.list-img ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.list-img ul li{
	list-style: none;
	width: 30%;
	padding: 10px;
	background-color: #FFFFFF;
}
.list-img ul li img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
    border-radius:5px;
    border:2px solid #ffffff;
    box-shadow: 5px 5px 5px #ccc;
}

.title{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px auto;
  margin-top:-50px;
}
.title h3{
  text-align: center;
  margin:30px 10px;
  color: black;
}
.title .line{
  width:50px;
  height: 1px;
  background-color: black;
}

.list{
	width: 100%;
	margin:-30px auto;
}
.list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.list ul li{
	list-style: none;
	width: 30%;
	background: #FFFFFF;
	padding: 10px;
	box-shadow: 2px 3px 5px #ccc;
	margin: 10px 0;
}
.list ul li a{
	display: block;
	width: 100%;
	text-decoration: none;
}
.list ul li img{
	width: 100%;
	object-fit: cover;
}
.list ul li p{
  text-align:center;
  }

.foot{
  text-align:center;
  position:fixed;
  bottom:0px;
  z-index:999;
  width:100%;
  height:30px;
  background-color:black;
  }
.foot p{
  color:#ffffff;
  line-height:30px;
  }