* {
    /* border: 1px solid coral; */
    font-family: San Francisco, sans-serif;
    color: #444;
    font-size: 14px;
}

html, body {
    height: 100%;
    margin: 0;
}

fieldset {
    margin: 50px;
}

canvas {
    /* This adds to the w/h of the canvas and triggers window scrollbars */
    /* border: 1px solid #d3d3d3; */

    /* Trick: border without affecting render size*/
    /* https://stackoverflow.com/a/13517809/1934487 */
    -webkit-box-shadow: 0px 0px 0px 1px #ddd;
    -moz-box-shadow: 0px 0px 0px 1px #ddd;
    box-shadow: 0px 0px 0px 1px #ddd;
    border-radius: 10px;
}

.text-small {
    font-size: 12px;
}

#canvas-fieldset {
    display: flex;
    justify-content: center;
    align-items: center;
}

#canvas-container {
    /* flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; */
}


/* Small screens */
@media all and (min-width: 400px) {
    /* We tell both divs to share a row */

    #app-wrapper-vertical {
        display: flex;
        flex-flow: column;
    }
    
    #app-wrapper-horizontal {
        flex-grow: 1;
        display: flex;
        flex-flow: column;
    }

    #canvas-fieldset {
        order: 1;
        flex-direction: row;
    }

    #sidebar-fieldset {
        order: 2;
    }

    #canvas-container {
        flex-flow: column;
        height: 100%;
    }
    
    #canvas-container {
        min-height: 500px;
    }
}

/* Large screens */
@media all and (min-width: 800px) {
    #app-wrapper-vertical {
        min-height: 100%;
        display: flex;
        flex-flow: row;
    }
    
    #app-wrapper-horizontal {
        flex-grow: 1;
        display: flex;
        flex-flow: row;
    }

    #canvas-fieldset {
        order: 2;
        flex: 1 100%;
        flex-direction: row;
    }

    #sidebar-fieldset {
        order: 1;
        flex: 1 0 250px;
    }

    #canvas-container {
        min-height: 0;
    }
}

.control-stack {
    display: flex;
    flex-flow: column;
}

.control-container {
    flex: 1;
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.border-bottom {
    border-bottom: 1px solid #d3d3d3;
    /* border-radius: 5px; */
}

body {
    font-family: San Francisco, sans-serif;
    color: #444;
    font-size: 14px;
    text-align: center;
    margin: 20px;
  }