html {
    font-family: sans-serif;
}

#keyboardContainer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
}

#directionsAndButtonsContainer {
    width: max-content;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

#directionsContainer {
    margin: 20px 20px;
}


.recordButton {
    width: 50px;
    height: 50px;
    border: solid black 2px;
    border-radius: 5px;
    border-bottom: 15px solid black;
    text-align: center;
    font-size: 1rem;
    color: darkred;
    transition: all 50ms ease-out;
    display: inline-block;
    margin: 0 10px;
    line-height: 3em;

}

:root {
    --keyWidth: 50px;
    --keyHeight: 200px;

}

.reset-button {
    background-color: transparent;
   
  }

.pianoKey {
    height: var(--keyHeight);
    width: var(--keyWidth);
    border: solid black 2px;
    border-radius: 5px;
    border-bottom: 15px solid darkslategrey;
    z-index: 0;
    margin: 0 2px;
    transition: all 50ms ease-out;
    transform-origin: top;
}

.blackKey {
    background-color: black;
    height: calc(var(--keyHeight)*.65);
    margin: 0px calc(-.5* var(--keyWidth));
    border-color: gray;
    border-bottom: 10px solid #444444;
    z-index: 1;
}

.pianoKeyPressed {
    border-bottom: solid 5px black;
    background-color: antiquewhite;
    transform: scaleY(1.04);
    
}