#body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

h1 {
  text-align: center;
  padding-right: 175px;
  color: yellow;
  font-size: 2rem;
}

#drumkit-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
  gap: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 7rem;
}

#kick {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#boom {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#snare {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#hi-hat {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#ride {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#crash {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#rimshot {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}
#clave {
  width: 7rem;
  height: 7rem;
  border: 1px solid black;
  color: yellow;
  font-size: 2rem;
}