/* =====================================================
   DRUM KIT – LAYOUT
===================================================== */
.set {
  margin: 8vh auto;
  text-align: center;
}

/* =====================================================
   DRUM BUTTON
===================================================== */
.drum {
  width: 150px;
  height: 150px;
  margin: 10px;

  outline: none;
  border: 10px solid var(--border-color);
  border-radius: 15px;
  cursor: pointer;

  font-family: var(--font-arvo);
  font-size: 5rem;
  font-weight: 900;
  line-height: 2;

  color: var(--highlight-color);
  text-shadow: 3px 0 var(--primary-color);

  background-color: white;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* =====================================================
   PRESS ANIMATION
===================================================== */
.pressed {
  transform: scale(0.95);
  box-shadow: 0 3px 6px var(--primary-color);
  opacity: 0.6;
}

/* =====================================================
   DRUM IMAGES
===================================================== */
.w {
  background-image: url("../images/tom1.png");
}

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

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

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

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

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

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