body {
  /* background-color: #c9e4ca; */
  font-family: "Roboto Mono", monospace;
  padding: 20px;
}
#mainHeader,
#subHeader {
  text-align: center;
}
#subHeader {
  color: #364958ae;
}

#start,
#save {
  margin-top: 30px;
}

.param {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* Chromium */
  width: 8px;
  height: 175px;
  padding: 0 5px;
  display: block;
  margin: 0px auto;
  background: #364958;
}

#synthInputs,
#synthInputs2 {
  /* height: 250px; */
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 10px;
  background-color: rgb(250, 248, 248);
  border-radius: 5px;
  border: 1px solid rgb(230, 230, 230);;
}

.paramLabel {
  text-align: center;
  padding: 10px;
  margin: 0px;
  color: #364958;
  font-weight: bold;
}
#instructions {
  margin-top: 50px;
}

#consentBtns {
  text-align: center;
}

#research {
  padding-bottom: 50px;
}

#keyboard {
  margin-top: 50px;
  position: relative;
}

.whiteKey {
  height: 100px;
  width: 60px;
  margin: 3px;
  background-color: #f8f8ff;
}

.blackKey {
  position: absolute;
  height: 50px;
  width: 60px;
  margin-left: -30px;
  background-color: #dcdcdc;
  /* border: 1px solid black;
  border-radius: 2px; */
}

#questionnaire {
  max-width: 60%;
}

#switchBtn {
  color: #fff;
  background-color: #b98df5;
  border-color: #b98df5;
}

#promptEnable{
  margin-top: 10px;
}