/* .container{
    display: flex;
    background-image: linear-gradient(to bottom , pink , plum , rgb(255, 105, 195) );
    background-size: cover;
}
.wishes{
    width: 250px;
    border: 6px solid rgb(255, 19, 145);
    border-radius: 50px;
} */
/* to bottom => top to bottom (default)
to top => bottom to top 
to left => right to left
to right => left to right */
body{
  background-color: black;
  background-image: linear-gradient(to left , black ,rgb(57, 56, 56) , gray);
  
}
.title{
width: 300px;
border-radius: 30px;

}
.player {
  width: 300px;
  margin: 50px auto;
  text-align: center;
  background-color: burlywood;
  border-radius: 30px;
  box-shadow: 15px 20px 30px rgb(135, 137, 137);
}
.player:hover{
  box-shadow: 15px 10px 40px rgb(159, 255, 255);
  cursor: pointer;
}
.controls button {
  padding: 10px;
  margin: 5px;
}

#progress {
  width: 60%;
  margin: 10px;
  accent-color: rgb(255, 255, 255);
}
#time{
  color: white;
  font-size: 20px;
}
.sName{
  font-size: 30px;
   font-family: "Rouge Script", cursive;
}
.aName{
 font-family: "Delius Swash Caps", cursive;
 font-size: 16px;
}
#play{
  width: 40px;
}
.main{
  display: flex;
  flex-wrap: wrap;
gap: 30px;
}

.heading{
  font-size: 60px;
  color: antiquewhite;
  font-family: "Rouge Script", cursive;
}
.data{
  text-align: center;
}
.back{
  position: relative;
  left: 500px;
  background-image: url(./details/musicc.gif);
  width: 500px;
  border-radius: 50px;
  box-shadow: 20px 20px 80px rgb(72, 105, 251);
  height: 500px;
}
.back:hover{
  background-image: url(./details//music2.gif);
  cursor: pointer;
    box-shadow: 20px 20px 80px rgb(251, 72, 158);
}

.visit{
  background-color: aliceblue;
  color: rgb(255, 107, 132);
  padding: 15px;
  border-radius: 20px;
}
.visit:hover{
  background-color: black;
  color: aliceblue;
  cursor: pointer;
}