Maingron/MainOS

body {
    height:100vh;
    background-color:var(--beige2) !important;
    overflow:hidden;

    .leftmenu,
    .rightmenu {
        z-index: 999;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        position: absolute;
        justify-content: space-between;
        height: auto;
        max-height:calc(100% - var(--altbarheight));
        overflow: hidden;
        border: 1px solid var(--themecolor);
        overflow: scroll;
        border-radius: var(--border-radius);
        background:var(--black3);
        padding: .2rem;

        h3 {
            margin: 0;
            display: block;
            width: 100%;
            padding: 0 .25rem .25rem .25rem;
        }
        
        button {
            height: 2.5rem;
            width: 2.5rem;
            line-height: 0;
            margin:.1rem;
            padding:.1rem;
            font-size: 1.25rem;

            &.active {
                background: var(--hovercolor);
            }
        }
    }

    .leftmenu {
        right: 5px;
        top: calc(var(--altbarheight) + 5px);
        width: 5.5rem;
    }

    .rightmenu {
        width: 9rem;
        right: 5px;
        bottom: 5px;
    }

    .altbar {
        a:hover {
            background-color: var(--hovercolor);
        }

        a:active {
            background-color: lime;
        }
    }

    #canvascopy {
        position:absolute;
        top:0;
        left:0;
        filter:blur(4px);
        opacity:.6;
        z-index:-1;
        height:100%;
        width:100%;
        object-fit: cover;
    }

    #loadcanvas {
        position:absolute;
        opacity:0;
        display:inline;
        visibility: hidden;
    }

    #imagep {
        position: relative;
        display: inline-block;
        top: 0;
        left: 0;
        height: calc(100% - var(--altbarheight));
        max-height:calc(100% - var(--altbarheight));
        width: 100%;
        justify-content: center;
        align-items: center;
        overflow: scroll;
        box-sizing: border-box;

        canvas {
            cursor:crosshair;
            margin: 0;
            padding: 0;
            border: 1px solid #000;
            transform:scale(1);
            transform-origin: top left;
            position:relative;
            image-rendering: pixelated;
            backdrop-filter: blur(10px);
            background: url('checkerboard.png');
            box-shadow: 0 0 4px 4px #fff;

        }
    }
}

@media (prefers-color-scheme:dark) {
    body {
        background:var(--black) !important;
    }
}