html, body {
    margin: 0;
    body: 0;
}

canvas {
    position: absolute;
}

#color-picker {
    position: absolute;
    width: 100vw;
    height: 100px;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 3px solid #333;
    text-align: center;
}

.color {
    width: 10%;
    margin-left: 10px;
    margin-right: 10px;
    height: 100px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #333;
    box-shadow: inset 0px -7px 3px rgba(255, 255, 255, 0.3);
}

@media(max-width: 700px) {
    #color-picker {
        height: 200px;
    }

    .color {
        width: 12%;
    }
}

.color[data-color="RED"] {
    background-color: red;
}

.color[data-color="ORANGE"] {
    background-color: orange;
}

.color[data-color="YELLOW"] {
    background-color: yellow;
}

.color[data-color="GREEN"] {
    background-color: green;
}

.color[data-color="BLUE"] {
    background-color: blue;
}

.color[data-color="PURPLE"] {
    background-color: purple;
}

.color[data-color="BLACK"] {
    background-color: black;
}