html, body, .wrap 
{
    color: black;
    height: 100%;
    /*width: 100%;*/
    margin: 0px;
    text-align: center;
    font-family: emulogic;
}

select
{
  font-family: emulogic;
}

#request_audio_permission
{
  position:fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #00bcd4de;
  z-index: 1;
  cursor: pointer;

}

#permission_text
{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
}

#waveform_image
{
  /*background: url(images/waveforms.png) 0px -12px no-repeat;*/
  background-image: url(images/waveforms.png);
  background-position: 0px -8px;
  width: 400px;
  height: 86.25px;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  margin-left: auto;
  margin-right: auto;
}

.wrap
{
    display:table;
}

.thirdRow
{
    position: absolute;
    background-color:plum;
    height:15vh;
    width: 100%;
    bottom: 0px;
}

.whiteKeysCorrect
{
  background-color: white;
  box-sizing: border-box;
  border: 0.1vw solid black;
  width: 2.856vw;
  height: 30vh;
  cursor: pointer;
  position: relative;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.blackKeysCorrect
{
    background-color: black;
    box-sizing: border-box;
    border: 0.1vw solid gray;
    width: 2.206vw;
    margin-left: .65vw;
    height: 15vh;
    position: relative;
    cursor: pointer;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

#upperKeyboard
{
  display: flex;
  margin-left: 1.1vw;
  position: absolute;
  bottom:15vh;
}

#underKeyboard
{
  display: flex; 
  position: absolute;
  bottom: 0px;
  
}

.hideBlackKey
{
  background-color: pink;
  height: 0px;
  border: 0px;
}

.whiteKeys:hover{background-color:#d5d5d5;}
.whiteKeys:active{background-color:#00BCD4;}

.whiteKeys_keyboard_down{background-color:red;}

.whiteKeys_midi_down{background-color: #00BCD4}
.whiteKeys_midi_up{background-color: white}


/* .blackKeys_midi_down{background-color: orange} */
.blackKeys_midi_down{background-color: #00BCD4}
.blackKeys_midi_up{background-color: black}




.blackKeys:hover{background-color:#737373;}
.blackKeys:active{background-color:orange;}

.middleC_marker
{
    position: fixed;
    width: 2vw;
    height: 2vw;
    background-color: mediumpurple;
    left: 1vw;
    bottom: 1vh;
    border-radius: 45px;
    left: 51.7vw;
}

.middleC_marker.GrandStaff
{
  background-color: deeppink;
  left:51.8vw;
    border-radius: 45px;
    width: 2vw;
    height: 2vw;
}



.slider {
  margin: 10px;
  -webkit-appearance: none;
  /*width: 100%;*/
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #2196F3;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
}