/*Makes the purple box that all the page's content is in*/
    #page{
        margin-left: 20rem;
        margin-right: 20rem;
        text-align: center;
        border: 5px solid #b496ff;
        padding:0.5rem;
        height:600px;
        font-size: 1rem;
    }
/**/


/*Makes it so the h1 title is a bit closer to the other stuff and is underlined*/
    h1{
        margin-top:0.5rem;
        margin-bottom: 0.5rem;
        text-decoration: underline #ffd996;
    }
/**/


/*Seperates the form items so they are not as close to eachother*/
    form{
        padding-top:0.5rem;
        padding-bottom:0.5rem;
    }
/**/


/*Changing the cursor when the user hovers over the form values as the cursor doesn't change when hovering over them overwise*/
    #submit-data:hover, #sound-on:hover, #sound-off:hover{
        cursor: pointer;
    }

    #volume:hover{
        cursor: grab;
    }
/**/


/*This is all just styling the form items to be of the colour scheme*/
    #submit-data{
        font-weight: bold;
        background-color: #ffd996;
        border:2px solid #ab7e2e;
        border-radius: 3px;
    }

    #volume, #open-username-yes, #open-username-no{
        accent-color: #b496ff;
    }

    #sound-on, #sound-off{
        accent-color: #ffd996;
    }

    #username{
        border:2px solid #b496ff;
        border-radius: 3px;
    }
/**/


/*This section doesn't display until changed in the settings.js file*/
    #username-label, #username{
        display:none;
    }
/**/