.keyboardContainer {
  display: flex;
  height: 10rem;
}

.octaveContainer {
  position: relative;
  width: 15rem;
}

.whiteKeyContainer {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: stretch;
}

.whiteKey {
  background-color: #f2eae0;
  border: var(--border);
  border-left: none;
  border-radius: 0 0 0.25rem 0.25rem;
  flex: 1;
  cursor: pointer;
}

.keyboardContainer
  > .octaveContainer:first-of-type
  > .whiteKeyContainer
  > .whiteKey:first-of-type {
  border: var(--border);
}

.blackKeyContainer {
  position: absolute;
  top: 0;
  display: flex;
  height: 55%;
  width: 100%;
  align-items: stretch;
  pointer-events: none;
}

.blackKey {
  margin: 0;
  background-color: #bda6ce;
  /* Here, I have used a purple colour from the colourhunt palette. I wanted to make each colour different so it wont look confusing for beginning users to play.  */
  border: var(--border);
  border-left: none;
  border-radius: 0 0 0.25rem 0.25rem;
  flex: 1;
  cursor: pointer;
  pointer-events: all;
}

.blackKey:nth-of-type(1) {
  border: var(--border);
  width: calc(2rem + 4px);
}

.blackKey:nth-of-type(3) {
  border: var(--border);
  width: calc(2rem + 4px);
}

.blackKeySpacer {
  flex: 0.5;
  opacity: 0;
}

.whiteKey.activeKey {
  background-color: #d9c8bb;
}
/* Origially, this white keyboard colour was the same with the black keyboards, I decided to change each of these colour to make it look easier and obvious for new beginenrs.  */

.blackKey.activeKey {
  background-color: #555555;
}
/* Furthermore, I chose to keep borders visible around the keys and controls so users can easily recognise what can be pressed. This allows the interactive areas more obvious. */