#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 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: 0 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;
    }
}