#particles1,
#particles2,
#particles3,
#particles4,
#particles5,
#particles6,
#particles7,
#airspring1 {
  max-width: 460px;
}

#waveform1 {
  max-width: 250px;
}

#hero {
  max-width: 10px;
  margin-top: -0.5em;
}

#waveform_sound1,
#waveform_sound2,
#pulse_piston {
  max-width: 400px;
}

#pulse_sphere {
  max-width: 300px;
}

#waveform_addition1_seg0,
#waveform_addition2_seg0 {
  max-width: 400px;
  margin: 0 auto;
}

#string4_seg0,
#string5_seg0 {
  max-width: 500px;
  margin: 0 auto;
}

#pressure_spl_sl0 {
  margin-top: 2em;
}

kbd {
  background-color: #444;
  border-radius: 0.3em;
  border: 1px solid #222;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .3) inset;
  color: #eee;
  display: inline-block;
  /* font-weight: 700; */
  margin-left: 0.1em;
  margin-right: 0.1em;
  margin-bottom: 0.2em;
  line-height: 1.1em;
  vertical-align: middle;
  text-align: center;
  padding: 0.2em;
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  white-space: nowrap;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif !important;
}




.frequency {
  color: #729db1;
}


.amplitude {
  color: #c38d08;
}


.phase {
  color: #094157;
}

.green_blue {
  color: #28B16E;
}

.dark_orange {
  color: #D08739;
}

.spring {
  color: #666;
}

.high_p {
  color: #E12C11;
}

.low_p {
  color: #2885C8;
}

.mass {
  color: #8e6f58;
}

.plate {
  color: #555;
}


.key0 {
  color: #6da59e;
}

.key1 {
  color: #4e708d;
}

.key2 {
  color: #301F71;
}

.speaker {
  color: #5c8da9;
}

.ear {
  color: #ae9d19;
}

.keyboard_container {
  height: 240px;
  width: 100%;
  max-width: 250px;
  position: relative;
  margin: 0 auto 2em auto;
  visibility: hidden;
}


.keyboard_body {

  width: 246px;
  height: 233px;
  position: absolute;

  background: #487AA1;
  border: 1.5px solid #305069;
  box-shadow: inset 0 -8px 2px 1px rgba(0, 0, 0, 0.40), inset 0 4px 3px -3px rgba(255, 255, 255, 0.67);
  border-radius: 21px;
}

.keyboard_tray {
  width: 226px;
  height: 172px;
  left: 10px;
  bottom: 18px;
  position: absolute;
  background: #1B2E4B;
  border-radius: 11px;
  content: " ";
}


.keyboard_body::before {
  box-sizing: border-box;

  width: 226px;
  height: 24px;
  left: 10px;
  bottom: 198px;
  position: absolute;
  content: " ";

  background: #050A11;
  border: 1px solid #20314A;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.14);
  border-radius: 11px;
}



.keyboard_label {
  box-sizing: border-box;
  position: absolute;

  width: 72px;
  height: 20px;
  bottom: 200px;

  pointer-events: none;

  text-align: center;
  font-size: 16px;
  font-weight: 500;

  color: #EAFDFF;
  text-shadow: 0 0 3px #A1C6FF;
}


.keyboard_button {
  box-sizing: border-box;
  position: absolute;

  width: 72px;
  height: 167px;
  bottom: 21px;
  background: #FFFFFF;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.57), inset 0 -1px 3px 1px rgba(0, 0, 0, 0.34), inset 0 -9px 1px 0 #C3C3C3;
  border-radius: 8px;
  text-transform: capitalize;
  transition: all 0.04s linear;

  border: 1px solid #3D3D3D;
  cursor: pointer;
}

.keyboard_button.pressed {
  background: #FFFFFF;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.13) 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.75), inset 0 0 3px 1px rgba(0, 0, 0, 0.41), inset 0 -3px 1px 0 #B5B5B5;
}

.keyboard_button_label {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
  transition: all 0.04s linear;
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
}


.pressed .keyboard_button_label {
  bottom: 16px;
  color: #eee;
}

.left_right_button_container {
  display: block;
  text-align: center;
}


.keyboard_container::before {
  width: 246px;
  height: 200px;
  left: 2px;
  bottom: 20px;
  position: absolute;
  content: " ";
  box-shadow: 0 17px 20px 0 rgba(0, 0, 0, 0.68);
}

#analyser_button {
  margin: 0 auto 3em auto;
  display: block;
  width: 100px;
  height: 100px;
  background: #D8D8D8;
  box-shadow: 0 2px 0 2px #444444, 0 0 4px 0 rgba(0, 0, 0, 0.50), 0 5px 7px 0 rgba(0, 0, 0, 0.37), inset 0 3px 3px 0 rgba(255, 255, 255, 0.33), inset 0 -4px 3px 0 #A3A3A3;
  border-radius: 50%;
  outline: none;
  border: none;
  position: relative;
  transition: all 0.1s linear;
}


#analyser_button::after {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 40px;
  bottom: 41px;
  content: " ";
  background: #333;
  border: 1px solid #222;
}


@keyframes center_animation {
  from {
    background-color: #FF0404;
  }

  to {
    background-color: #FF6262;
  }
}


@keyframes shadow_animation {
  from {
    box-shadow: 0 0 0 2px #444444, 0 0 4px 0 rgba(0, 0, 0, 0.50), 0 0 7px 0 rgba(0, 0, 0, 0.37), inset 0 3px 4px 0 rgba(0, 0, 0, 0.27), inset 0 -1px 3px 0 #A3A3A3;
  }

  to {
    box-shadow: 0 0 0 2px #C30C0C, 0 0 4px 3px rgba(255, 0, 0, 0.50), inset 0 0 4px 0 #FF0000, inset 0 5px 6px 0 rgba(0, 0, 0, 0.27)
  }
}

#analyser_button.selected::after {
  background: #FF0404;
  box-shadow: 0 0 9px 4px #FF6464, 0 0 30px 8px #FF3939, inset 0 0 9px 2px rgba(197, 0, 0, 0.51);
  border: 0px solid transparent;
  transition: all 0.2s linear;
  animation-name: center_animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

#analyser_button.pressed,
#analyser_button:active {
  transform: translate(0px, 2px);
  background: #C9C9C9;
  box-shadow: 0 0 0 2px #444444, 0 0 4px 0 rgba(0, 0, 0, 0.50), 0 0 7px 0 rgba(0, 0, 0, 0.37), inset 0 3px 4px 0 rgba(0, 0, 0, 0.27), inset 0 -1px 3px 0 #A3A3A3;
}

#analyser_button.selected {
  box-shadow: 0 0 0 2px #C30C0C, 0 0 4px 3px rgba(255, 0, 0, 0.50), inset 0 0 4px 0 #FF0000, inset 0 5px 6px 0 rgba(0, 0, 0, 0.27);
  animation-name: shadow_animation;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}


#analyser_button.pressed::after,
#analyser_button:active::after {
  bottom: 39px;
}


.slider_size .slider_left_gutter,
.slider_size .slider_right_gutter,
.slider_size .slider_knob {
  background: #EDBA38;
}

.slider_f .slider_left_gutter,
.slider_f .slider_right_gutter,
.slider_f .slider_knob {
  background: #89bad2;
}


.slider_a .slider_left_gutter,
.slider_a .slider_right_gutter,
.slider_a .slider_knob {
  background: #EBAA09;
}


.slider_ph .slider_left_gutter,
.slider_ph .slider_right_gutter,
.slider_ph .slider_knob {
  background: #0C506B;
}

.slider_dark_orange .slider_left_gutter,
.slider_dark_orange .slider_right_gutter,
.slider_dark_orange .slider_knob {
  background: #D08739;
}

.slider_green .slider_left_gutter,
.slider_green .slider_right_gutter,
.slider_green .slider_knob {
  background: #44A781;
}

.slider_light_gray .slider_left_gutter,
.slider_light_gray .slider_right_gutter,
.slider_light_gray .slider_knob {
  background: #bbb;
}


.slider_red .slider_left_gutter,
.slider_red .slider_right_gutter,
.slider_red .slider_knob {
  background: #E12C11;
}

.slider_string .slider_left_gutter,
.slider_string .slider_right_gutter,
.slider_string .slider_knob {
  background: #b08c72;
}

@media only screen and (max-width: 600px) {
  #spl {
    font-size: 1.2em;
  }
}

@media only screen and (max-width: 500px) {
  #spl {
    font-size: 1.1em;
  }
}

@media only screen and (max-width: 450px) {
  #spl {
    font-size: 1em;
  }
}

@media only screen and (max-width: 400px) {
  #spl {
    font-size: 0.9em;
  }
}