body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: rgb(240, 240, 240);
    margin: 0;
}

#buttonfullscreen {
    /*margin: 10px 10px 0;*/
    margin-left: auto;
    /*justify-self: right;*/
}

#buttonfullscreen input {
    /*height: 20px;*/
    width: auto;
    padding: 0;
}

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin-top: -55px;*/
}

#title {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    width: 100%;
}

#title h1 {
    /*margin: 16px auto 0;*/
    margin: 6px 0 0 auto;
    
}

#instructions {
    margin: 4px auto 16px auto;
}

.vseparator {
    width: 1px;
    height: 30px;
    border-left: 1px inset rgb(10, 10, 10, 0.25);
}

.hseparator {
    height: 1px;
    min-width: 200px;
    border-top: 1px inset rgb(10, 10, 10, 0.25);
}

#controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#controls1, #controls2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 320px;
    /*border-top: 1px inset rgb(10, 10, 10, 0.25);*/
}

#controls1 {
    margin: 0 auto;
}

#controls2 {
    margin: 12px 0 10px;
    flex-wrap: wrap;
}

#colorcontainer {
    display: flex;
    align-items: center;
    margin: auto 30px;
}

#colorwheel {
    border-radius: 50%;
    position: absolute;
    background: transparent;
}

#colorwheelbackground {
    margin: 1px;
    border-radius: 50%;
}

#colorinput {
    visibility: hidden;
    position: absolute;
}

#opacitycontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 30px;
}

#clearbutton {
    width: 50px;
    border-radius: 10px;
    margin: auto 30px;
}

#gridsizeslidercontainer, #pensizeslidercontainer {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 6px auto;
}

#gridsizeslidercontainer label,
#pensizeslidercontainer label {
    min-width: 80px;
    text-align: center;
    border-radius: 10px;
}

#gridsizeslidercontainer input,
#pensizeslidercontainer input {
    width: 100%;
    margin: 0 10px;
}

#gridsizeslidercontainer output,
#pensizeslidercontainer output {
    border-radius: 50%;
    min-width: 30px;
    text-align: center;
}

#gridcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*min-width: 200px;
    min-height: 200px;*/
    background: rgb(254, 254, 255);
}

#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
}

#copyright {
    padding-top: 4px;
    margin: 0 30px;
    border-top: 1px solid rgb(100, 100, 100, 0.2);
}

img:hover {
    box-shadow: 0px 0px 16px rgb(0, 0, 0, 0.5);
}

.cell {
    margin: 0;
    box-sizing: border-box;
    border: 1px solid rgba(41, 41, 41, 0.06);
}

button:hover {
    color: whitesmoke;
    background: rgb(255, 0, 0);
    box-shadow: 0px 0px 20px rgb(0, 0, 0);
}