#canvas-component {
    --footer-panel-background-color: var(--button-background-color);
    --footer-panel-border-color: var(--button-border-color);
    --footer-panel-border-radius: 4px;

    /* debug add border style */
    border-width: 2px;
    border-color: var(--primary-border-color-dark);
    border-style: solid;
    border-radius: 2px;
    padding: 1%;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    #canvas-content {

        /* debug add border style */
        /* border-width: 5px;
        border-color: rgb(96, 93, 224);
        border-style: solid; */
        padding: 1px;

        flex-grow: 1;

        display: grid;
        align-items: center;
        justify-items: center;

        width: 100%;
        height: 80%;
        box-sizing: border-box;

        canvas {
            /* debug add border style */
            border-width: 2px;
            border-color: rgba(91, 198, 67, 0.669);
            border-style: solid;
            border-radius: 5px;
            padding: 1px;

            max-width: 100%;
            max-height: 100%;
            /* this is required for some reason to keep the full canvas in view
             * in content */
            overflow: hidden;
        }

    }

    #canvas-footer-panel {
        /* maybe should take out the footer completely in html */
        display: none;
    }

    /* #canvas-footer-panel {
        padding: 1px;
        box-sizing: border-box;

        flex-shrink: 0;
        width: 100%;
        height: 20%;

        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;

        textarea {
            flex-grow: 1;
        }

        button {
            height: 100%;
            flex-shrink: 0;
            align-self: center;
            margin: 2px;
            border-color: var(--footer-panel-border-color);
            background-color: var(--footer-panel-background-color);
            border-width: 1px;
        }
    } */
}