.container {
   height: 100vh;
   text-align: center;
   background-color: #283149;
}

/* a {
   color: #ACC8E5;
   font-family: "Akaya Telivigala", system-ui;
   font-weight: 300;
   font-style: normal;
   font-size: 2rem;
   margin: 5px auto 8px;
   text-shadow: 5px 5px #000;
} */

h1 {
   margin-top: 75px;
   font-size: 5rem;
   color: #DBEDF3;
   font-family: "Arvo", cursive;
   text-shadow: 8px 8px #000;

}

.w {
   background-image: url('./images/tom1.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.a {
   background-image: url('./images/tom2.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.s {
   background-image: url('./images/tom3.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.d {
   background-image: url('./images/tom4.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.j {
   background-image: url('./images/snare.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.k {
   background-image: url('./images/crash.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.l {
   background-image: url('./images/kick.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.set {
  margin: 10% auto;
}

.drum {
   outline: none;
   border: 10px solid #64749f;
   font-family: 'Arvo', cursive;
   color: #041dda;
   font-size: 4rem;
   font-weight: 900;
   line-height: 2;
   text-shadow: -2px -2px 5px #dce226, 2px -2px 5px #dce226, -2px 2px 5px #dce226, 2px 2px 5px #dce226;
   border-radius: 15px;
   display: inline-block;
   width: 150px;
   height: 150px;
   text-align: center;
   margin: 10px;
   background-color: white;
}

/* .pressed {
   box-shadow: 0 3px 4px 0 #d8edf3;
   opacity: 0.5;
} */

.pressed {
   color: #da0404;
}