:root {
    --colors-background-neutral-1: rgb(20, 25, 25);
    --colors-background-neutral-2: rgb(30, 35, 35);
    --colors-background-neutral-3: rgb(40, 45, 45);
    --colors-background-neutral-4: rgb(50, 50, 50);
    --colors-background-neutral-5: rgb(60, 65, 65);
    --colors-background-neutral-6: rgb(70, 75, 75);
    --colors-background-neutral-7: rgb(80, 85, 85);

    --colors-background-primary-1: rgb(20, 50, 50);
    --colors-background-primary-2: rgb(22, 65, 65);
    --colors-background-primary-3: rgb(23, 80, 80);
    --colors-background-primary-4: rgb(25, 95, 95);
    --colors-background-primary-5: rgb(27, 110, 110);
    --colors-background-primary-6: rgb(28, 125, 125);
    --colors-background-primary-7: rgb(30, 140, 140);
}

:root {
    font-family: "Pixel Arial";
    cursor: url("../assets/cursor_default.png"), auto;
}

@font-face {
    font-family: "Gohu 11";
    src: url(../assets/fonts/gohufont-11.ttf);
}

@font-face {
    font-family: "Gohu 14";
    src: url(../assets/fonts/gohufont-14.ttf);
}

@font-face {
    font-family: "Pixel Arial";
    src: url(../assets/fonts/pixel-arial-14.otf);
}

@font-face {
    font-family: "Pixel Arial";
    font-weight: bold;
    src: url(../assets/fonts/pixelarial-bold.ttf);
}

body {
    background: var(--colors-background-neutral-4);
    height: 100vh;
    margin: 0;
}

#ui {
    position: fixed;
    #left, #right, #top, #bottom {
        background: var(--colors-background-neutral-1);
    }

    #top {
        top: 0;
        left: 0;
        width: 100vw;
        height: 25px;
        #menuBar {
            display: flex;
            align-items: center;
            height: 100%;
            .menuItem {
                background: var(--colors-background-neutral-3);
                margin: 0 1px;
                color: white;
                height: 100%;
                display: flex;
                padding: 0 10px;
                align-items: center;
            }
            .menuItem:hover {
                background: var(--colors-background-primary-3);
            }
            .menuItem.open {
                background: var(--colors-background-primary-7);
            }
            .itemContents {
            display: none;
            position: absolute;
            top: 25px;
            min-width: 160px;
            transform: translateX(-10px);
            background-color: var(--colors-background-neutral-2);

            .subMenuItem {
                padding: 2px 5px;
            }
            .subMenuItem:hover {
                background-color: var(--colors-background-neutral-7);
            }
            .subMenuItem[disabled] {
                background: rgb(30, 40, 40);
                color: rgb(80, 90, 90)
            }
            .subMenuItem[disabled]:hover {
                background: rgb(30, 40, 40);
            }
            }
            
            .menuItem.open .itemContents {
            display: block;
            }
        }
    }
    
    #bottom {
        position: fixed;
        height: 200px;
        width: 100vw;
        bottom: 0;
        left: 0;
    }

    #left, #right {
        top: 25px;
        padding: 5px;
        height: calc(100vh - 200px - 4px - 25px - 10px);
        position: fixed;
        border-bottom: 2px solid rgb(45, 55, 55);
        border-top: 2px solid rgb(45, 55, 55);
        z-index: -1;
    }
    #left {
        left: 0;
        #toolButtons {
            display: grid;
            grid: auto-flow 60px / repeat(2, 60px);
            .active img {
                background: #455;
            }
            button {
                all: unset;
                image-rendering: pixelated;
                border-image:  url("../assets/border.png") 16 / 6px / 0 round;
                border-image-outset: 2px;
                border-width:  10px;
                border-style:  solid;
                margin: 3px;
                width: auto;
                height: auto;
                img {
                    background: var(--colors-background-1);
                    margin: -9px;
                    padding: 9px;
                    width: calc(100%);
                    image-rendering: pixelated;
                }
            }
        }
        #colorPickers {
            position: absolute;
            bottom: 5px;
            left: 15px;
            input {
                all: unset;
                height: 60px;
                width: 60px;
                border-image:  url("../assets/border.png") 16 / 6px / 0 round;
                border-width:  3px;
                border-style:  solid;
            }
            #primaryColorPicker {
                position: relative;
                bottom: -30px;
                z-index: 1;
            }
            #secondaryColorPicker {
                position: relative;
                left: 35px;
            }
        }
    }
    #right {
        right: 0;
    }
}




#output {
    color: white;
    padding: 10px;
    a {
        color: cyan !important;
        font-weight: bold;
    }
}

#drawingCanvas {
    position: fixed;
    left: 0;
    top: 0;
    image-rendering: pixelated;
}

#backgroundCanvas {
    position: fixed;
    image-rendering: pixelated;
}

#overlay {
    mix-blend-mode: difference;
    position: fixed;
}

.popup {
    background: 
}