style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
  box-sizing: border-box;
  padding   : 0px;
  margin    : 0px;
}

html,
body {
  height: 100%;
}

body {
  background-image: url('./images/pexels-photo-995301.webp');
  background-position: center;
  font-family: 'Open Sans', sans-serif;
}

li {
  list-style: none;
  border    : 5px solid #595260;
  max-width : 100px;
  width     : 100%;
  text-align: center;
  padding   : 5px;
  background: #B2B1B9;
}

#drum-machnie {
  width          : 100%;
  height         : 100%;
  display        : flex;
  justify-content: center;
  align-items    : center;
  background     : #2C2E43;
  opacity: 0.8;
}

#display {
  display        : flex;
  justify-content: space-around;
  max-width      : 1200px;
  width          : 100%;
}

.key {
  font-size  : 20px;
  font-weight: 700;
  margin-top : 10px;
}

.tune {
  font-size : 15px;
  font-style: italic;
  margin    : 10px 0px;
}

.playing {
  border: 5px solid #FFD523;
}