.canvas-wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;

    .canvas-container {
        height: auto;
        max-width: 450px;
    }

    canvas {
        border-radius: 3rem;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border: solid 2px white !important;
        width: 100%;
        height: auto;
    }

    .controls {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        gap: 7.5%;
        width: 100%;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: black;
            text-decoration: none;

            &.active {
                color: white;
            }

            &.disabled {
                pointer-events: none;
                opacity: 0.5;
            }
        }
    }

    .form-actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: flex-end;

        a {
            width: min-content;
        }
    }
}