body {
  font-family: "Arvo", cursive;
}

h1 {
  font-size: 5rem;
  text-shadow: 3px 0 #DA0463;
  animation: bounceIn 2s;
}

footer {
  font-family: sans-serif;
}

.w {
  background-image: url("images/crash.png");
  background-size: cover;
}

.a {
  background-image: url("images/kick.png");
  background-size: cover;
}

.s {
  background-image: url("images/snare.png");
  background-size: cover;
}

.d {
  background-image: url("images/tom1.png");
  background-size: cover;
}

.j {
  background-image: url("images/tom2.png");
  background-size: cover;
}

.k {
  background-image: url("images/tom3.png");
  background-size: cover;
}

.l {
  background-image: url("images/tom4.png");
  background-size: cover;
}

.drum {
  width: 100px;
  height: 100px;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px;
  border: none;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.drum:active,
.drum.pressed {
  transform: scale(1.2);
  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.6);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}