body {
    margin: auto;
    width: 75%;
    background-color: #b597f2;
    text-align: center;
    color: black;

    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 1000;
    font-style: normal;
}

/* HEADINGS */
h1 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 3em;
    margin-top:0.5em;
    margin-bottom: 0em;
}

h2 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/**/

.jam {
    display: inline;
    font-size: 1.5em;
    color: black;
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 30;
    font-style: normal;
    margin-top: 1em;
 }

#canvas {

    border: 1em solid #e7c1ff;
    height: 500px;
    width: 900px;
    margin-top: 2em;
    margin-bottom: 0em;
    background-color: black;

}

button {
    cursor: pointer;

    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

/*INPUT STUFF*/
.inputThingies {
    display: flex;
    margin-left: 7.5%;
    margin-right: 7.5%;
    width: 85%;
}

.startButton {
    border-width: 1em;
    border-color: #000000;
    margin: 1em;
}

.colorButton {
    border-width: 1em;
    border-color: #000000;
    margin: 1em;

}

.volumeButton {
    border-width: 1em;
    border-color: #000000;
    margin: 1em;
}

.recordingButton {
    border-width: 1em;
    border-color: #000000;
    margin-top: 3em;
    margin-left: 1em;

}

/*---input stuff*/


/*IDs/classes for inputs*/

#submit {
    background-color: #e7c1ff;
    border: 0.18em, solid, black;

}

#color {
    border-color: black;
    border-width: 0.15em;
    background-color: #e7c1ff;
}

.rainbowButtons {
    color: black;
    border-style: solid;
    
}

#record {
    background-color: #e7c1ff;
    border: 0.5em, solid, black;
    color: black;
    padding: 1em;
    text-align: center;
}

/*---ids*/

hr {
    border: 0.1em solid #e7c1ff;
}


/*END STUFF*/
.endStuff {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}

.hack {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: 1em;
    margin-bottom: 0.25em;
}

.smallButtons {
    background-color: #e7c1ff;
    border: 0.18em, solid, black;

}

.endWordsButtons {
    padding: 0.1em;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}