body{
  text-align:center;
  background:linear-gradient(135deg,#283149,#1a1f2b);
}

h1{
  font-size:5rem;
  color:#DBEDF3;
  font-family:"Arvo",cursive;
  text-shadow:4px 4px 10px rgba(0,0,0,0.6);
}

footer{
  margin-top:40px;
  color:#DBEDF3;
  font-family:sans-serif;
  opacity:0.8;
}

.set{
  margin:10% auto;
  max-width:800px;
}

.drum{
  outline:none;
  border:10px solid #404B69;
  font-size:5rem;
  font-family:'Arvo',cursive;
  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;
  background-color:white;
  cursor:pointer;

  background-size:cover;
  background-position:center;

  transition:all 0.15s ease;
}

.drum:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px #DBEDF3;
}

.pressed{
  transform:scale(0.95);
  box-shadow:0 2px 3px #DBEDF3;
  opacity:0.6;
}

.instructions{
  color:#DBEDF3;
  font-family:sans-serif;
  margin-bottom:30px;
  font-size:18px;
}

/* 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/snare.png"); }
.k{ background-image:url("./images/crash.png"); }
.l{ background-image:url("./images/kick.png"); }

/* responsive */

@media (max-width:768px){

  .drum{
    width:100px;
    height:100px;
    font-size:3rem;
  }

}

#title{
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

#current-key{
  transition: all 0.3s ease;
  font-weight: bold;
}

#hit-counter{
  color:#DBEDF3;
  font-family:sans-serif;
  font-size:18px;
  margin-bottom:20px;
}