* {
    box-sizing: border-box;
}

body {
    margin:0;
    position: relative;
    background-color: rgb(21, 24, 24);
}

main {
    margin:0;
}

input, select {
    margin:0;
    z-index: 2;
    float:left;
}

#controlbox {
    display:flex;
    flex-direction: column;
    margin:5px;
    padding:10px 5px;
    border:2px;
    border-color: rgba(0,0,0,.8);
    background-color: rgba(0,0,0,.6);
    height:auto;
    width:20%;
    z-index: 2;
    position:fixed;
    right:0px;
    color: #fff;
    font-weight: bold;
}


.control p {
    margin: 0;
    font-size: 15px;
    float:left;
    margin-right: 20px;
}

.control input[type="range"], .control button {
    width:100%;
}

.control label, .control input[type="checkbox"] {
    vertical-align:middle;
}

.control {
    width: 100%;
    display: inline-block;
    margin-bottom: 2px;
    padding:2px;
    background-color: rgb(255, 255, 255,0.1);
    font-family: Helvetica, sans-serif;
}

canvas {
    display:block;
    margin:auto;
    position:relative;
    background-color:grey;
}

input[type="file"] {
    display: none;
}

.fileLabel, .control button {
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-color: rgb(170, 50, 124);
    color:#fff;
    width:100%;
    padding:5px;
    margin:auto;
    display:inline-block;
    text-align: center;
    border:solid;
    border-radius: 10px;
    border-width:3px;
    border-color:lightgray;
}