html, body
{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

#video
{
    display:none;
}

#canvas
{
    position:fixed;
    inset:0;
    width:100vw;
    height:auto;
    transform: scaleX(-1);
}

.flipX
{
    transform: scaleX(1) !important;
}

.flipY
{
    transform: scaleY(-1) !important;
}

.line-break
{
    flex-basis:100%;
    height:0;
}

#effectsBar
{
    position:fixed;
    left:0;
    right:0;
    bottom:0;/*32px;*/

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;

    padding:12px;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(12px);

    transform:translateY(100%);
    opacity:0;

    transition:.25s ease;

    z-index:1000;
}

#effectsBar.visible
{
    transform:translateY(0);
    opacity:1;
}

.fx-btn
{
    border:none;
    border-radius:999px;
    padding:10px 16px;

    background:rgba(255,255,255,.15);
    color:white;

    cursor:pointer;
    transition:.2s;

    font-family:Arial,sans-serif;
}

.fx-btn:hover
{
    transform:translateY(-2px);
}

.fx-btn.active
{
    background:#00ff88;
    color:black;
    font-weight:bold;
}

#colorFilterPicker
{
    width:42px;
    height:42px;

    border:none;
    border-radius:10px;

    background:none;

    cursor:pointer;
}

.panel
{
    scrollbar-width: none;
    height: 100vh;
    overflow-y: auto;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auto
{
    width: 90%;
    margin-left: 5%;
}

.controls{

    width:40%;

    padding:20px;

    display:flex;

/*    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );*/

    gap:12px;

    border-radius:20px;

    background:var(--panel);

    box-shadow:var(--shadow);
    margin: 0;
    flex-direction: column;
    align-items: center;
}

button, input[type=text]{
    border: 2px solid #c50ec5;
    color: white;
    font-weight: bold;
    font-size: 200%;
    text-align: center;
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:52px;
    border-radius:14px;

    background:var(--btn);

    cursor:pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

button:hover, input[type=text]:hover{

    background:var(--btn-hover);

    transform:translateY(-2px);
}