body{
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-color: hsl(225, 100%, 94%);
  padding-top: 50px;
  font-family: 'Red Hat Display', sans-serif;
}

h1{
  margin-top: 0;
}

p, .purchase{
  font-size: 16px;
  font-weight: 500;
}

#middle-card{
margin: auto;
width: 450px;

}
.text{
  text-align: center;
}

.top-image{
  border-radius: 20px 20px 0 0;
}

.white-box{
background-color: white;
margin: 0;
padding: 30px;
border-radius: 0 0 20px 20px;
}

.color{
  color: hsl(224, 23%, 55%);

}

.pricing{
background-color: hsl(225, 100%, 98%);
border-radius: 12px;
padding: 20px 25px 0;
}

.bold{
  font-weight: 900;
  color: hsl(223, 47%, 23%);
}

.cost{
  margin-bottom: 0;

}

.link{
position: relative;
left: 260px;
bottom: 33px;
font-weight: 700;
}

a:hover{
text-decoration: none;
color:hsl(224, 23%, 55%);
}

.music-icon{
  float: left;
padding-right: 20px;
}

.purchase{
  margin-top: 30px;
  margin-bottom: 30px;
  width: 365px;
  font-weight: 600;
  padding-bottom: 10px;
  box-shadow: 5px 10px 18px #888888;
  background-color: hsl(245, 75%, 52%);
  border: 2px solid hsl(224, 23%, 55%);
  color: white;
}

.purchase:hover{
  background-color: hsl(224, 23%, 55%);
  color: white;
}

.cancel{
font-weight: 700;
}

.cancel:hover{
  color:hsl(223, 47%, 23%);
}

@media (max-width: 375px) {
body{
background-image: url("../images/pattern-background-mobile.svg");
  background-color: hsl(225, 100%, 94%);
}
}