style.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: sans-serif
}

body{
background-image: url('https://nintendoeverything.com/wp-content/uploads/taiko-drum-master.jpg'); 
background-size: cover;
}

#drumsBody {
  background-color: black;

}

#drums{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
/*   background-color: #f3ec78; */
  text-shadow: 2px 2px 0 rgba(204,225,255,0.2);
  background-image: url('/images/taiko-drum-vibrant.jpg');
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.drumA, .drumS, .drumD, .drumF, .drumG, .drumH, .drumJ, .drumK, .drumL{
  font-size: 50px;
  text-align: center;
  width: 10%;
  
}

:where(.drumA, .drumS, .drumD, .drumF, .drumG, .drumH, .drumJ, .drumK, .drumL):hover{
  cursor:pointer;

  
}
:where(.drumA, .drumS, .drumD, .drumF, .drumG, .drumH, .drumJ, .drumK, .drumL):active{
  border: 1px solid orange;
  box-shadow: 0px 0px 5px 5px orange;
}

.play{
  border: 1px solid orange;
  box-shadow: 2px 2px 2px 2px orange;
  
}


#keys{
  font-size: 50px;
  border: 1px solid black;
  text-align: center;
  width: 10%
}