html, body {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
canvas {
    display: block;
    max-width: 100vw;
    max-height: 85vh;
}
#palette {
    display: flex;
    width: 100vw;
    height: 15vh;
}
#palette > button, div {
    width: 8.33vw;
    height: 15vh;
    border: solid 1px black;
    margin-bottom: 0;
}
#drawSynth {
    flex-direction: column;
}
#drawButton {
    width: 100%;
    height: 50%;
    letter-spacing: 6px;
    font-size: 1.5em;
    background-color:#ffa1d6 ;
    /* #ff57b6 */
}
#synthButton {
    width: 100%;
    height: 50%;
    letter-spacing: 6px;
    font-size: 1.5em;
    background-color: #00fbff;
    /*#96fdff*/
}
#redButton {
    background-color: #FF0000;
}
#orangeButton {
    background-color: #FF9900;
}
#yellowButton {
    background-color: #FFEE00;
}
#greenButton {
    background-color: #10F000;
}
#blueButton {
    background-color: #0F3BFF;
}
#purpleButton {
    background-color: #8800FF;
}

/*this is a custom css slider i got so it wouldnt look crazy on my page*/
#weightButton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
    background: #ffa1d6;
}
#speedButton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
    background: #96fdff;
}
#weightText , #speedText {
    align-self: center;
    font-size: 1.5em;
    letter-spacing: 3px;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 90%;
    height: 10px;
    background: black;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: white;
    border: 2px solid black;
    border-radius: 0;
    margin-top: -2px;
}
input[type="range"]::-moz-range-track {
    background: black;
    border-radius: 5px;
}
input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: white;
    border: 2px solid black;
    border-radius: 0;
}

#polyButtons {
    flex-direction: column;
}
#polyButtons > button {
    width: 100%;
    height: 33%;
    font-size: 1.5em;
    letter-spacing: 5px;
    background-color: #999999;
}

#noteLength {
    flex-direction: column;
}
#noteLength > button {
    width: 100%;
    height: 33%;
    font-size: 1.5em;
    letter-spacing: 5px;
    background-color: #999999;
}

#eraseReset {
    overflow-x: hidden;
    flex-direction: column;
}
#eraseButton {
    width: 100%;
    height: 33%;
    font-size: 1.5em;
    letter-spacing: 6px;
    color: #FFFFFF;
    background-color: pink;
}
#killSwitch {
    width: 100%;
    height: 33%;
    font-size: 1.5em;
    letter-spacing: 6px;
    color: #FFFFFF;
    background-color: #000000;
}
#resetButton {
    width: 100%;
    height: 33%;
    font-size: 1.5em;
    letter-spacing: 6px;
    color:#FFFFFF;
    background-color: #FF0000;
}