body{margin: 0;padding: 0;background-color: #1e2330;text-align: center;font-family: Arial, Helvetica, sans-serif;color: #ffffff;}
#title{font-size: 4rem;margin: 30px 0;color: #ffffff;font-family: cursive;}
.set{margin: 10% auto;}
.drum{outline: none;border: 10px solid #404b69;font-size: 5rem;font-family: cursive;line-height: 2;
    font-weight: 900;color: #da0463;text-shadow: 3px 0 #dbedf3;border-radius: 15px;
display: inline-block;width: 150px;height: 150px;text-align: center;margin: 10px;}
footer{margin-top: 40px;font-size:1rem ;color:#ccc ;}

.w{background-image:url(clapping.png);}
.a{background-image:url(cymbals_4702741.png);}
.s{background-image:url(drum-kit.png);}
.d{background-image:url(drums.png);}
.j{background-image:url(kit.png);}
.k{background-image:url(drum-set.png);}
.l{background-image:url(keyboard.png);}

button {
  width: 100px;
  height: 100px;
  background-size: contain;     /* Make the whole image fit inside the button */
  background-repeat: no-repeat; /* Prevent image from repeating */
  background-position: center;  /* Center the image */
  border: none;
  margin: 10px;
  cursor: pointer;
}
.pressed{box-shadow: 0 3px 4px 0 #dbedf3; opacity:0.5;}