/* style that sets the title to display as a flexible element, then centers the title and content */
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* style for unordered list that sets the display as flexible,moving the letters corisponding to the keys into a 2 row left-right orientation as opposed to a listed orientation, then gets rid of the bullets in the list, and centers the content of the list */
ul {
  display: flex;
  list-style: none;
  justify-content: center;
}

/* Style rule that modifies the class "key" in the unordered list to create the white keys of the piano */
ul .key{
  /* Sets the position to relative */
  position: relative;
  /* sets the width of the keys */
  width: 60px;
  /* sets the height of the keys */
  height: 180px;
  /* creates a border around the keys, creating the framework of the piano */
  border: 1px solid black;
  /* changes the cursor to a pointer when hovering over the keyboard */
  cursor: pointer;
  /* sets the display of the keys to a flexibile display */
  display: flex;
  /* Sets the background color to cornsilk */
  background: cornsilk;
  /* centers the letters in the keys */
  justify-content: center;
  /* flexes the alignment of the letters in the keys to the bottom of the keys */
  align-items: flex-end;
  /*creates a border radius of 5 pixels to allow for the look of the piano keys instead of a grid */
  border-radius: 5px;
}

/* Style rule that modifies the class "black-key" in the unordered list to create the black keys for the piano */
ul .black-key {
  /* Sets the position to be absolute */
  position: absolute;
  /* Sets the width of the black keys */
  width: 45px;
  /* sets the left position of the black keys */
  left: 20.5px;
  /* sets the bottom position of the black keys */
  bottom: 60px;
  /* sets the height position of the black keys */
  height: 120px;
  /* sets the display of the keys to a flexible dislpaly */
  display: flex;
  /* sets the background color of the black keys to black */
  background: black;
  /* sets the color fo the text to white */
  color: white;
  /* sets the content of the black keys to center */
  justify-content: center;
  /* sets the border radius of the keys to allow for the look of the piano keys */
  border-radius: 5px;
  /* aligns the key text to the bottom of the black key */
  align-items: flex-end;
}