:root {
    --browser-theme-color: #202020;
    --ui-color-background1: #202020;
    --ui-color-form-background: #383838;
    --turtle-color-cursor: #00a000;
    --turtle-color-background: #20202040;
    --turtle-color-foreground: #ffffff;
}

#editor {
    --ui-color-form-background: #404040a0;
    --ui-color-form-disabled: #808080a0;
}

#bar {
    background: #28282840;
    backdrop-filter: blur(1rem);
    border-bottom-width: var(--ui-measure-border-medium);
    transition: height 0.3s;
}

#man {
    background: var(--ui-color-background1);
}

div.popup {
    border: var(--ui-measure-border-thick) solid #ffffff20;
    background: #20202040;
    backdrop-filter: blur(1rem);
    transition: transform 0.25s, opacity 0.25s, display 0.25s allow-discrete;
    transform: scale(0.98);
    opacity: 0;
    box-shadow: 0 0.25rem 2rem #00000060;
}

div.popup.visible {
    transform: scale(1);
    opacity: 1;

    @starting-style {
        /*Note: this only works properly in chromium-based browsers*/
        transform: scale(1.02);
        opacity: 0;
    }
}

#flowchartArea {
    transition: left 0.15s, right 0.15s;
    transform: none !important;
    /*neutralizes the 1 frame jitter workaround in toggleConsoleArea*/
    top: 0;
}

#variablesArea {
    transition: left 0.3s, display 0.3s allow-discrete;
}

#variablesArea {
    left: calc(var(--layout-variablesArea-width) * -1);
}

#variablesArea.expanded {
    left: 0;

    @starting-style {
        /*Note: this only works properly in chromium-based browsers*/
        left: calc(var(--layout-variablesArea-width) * -1);
    }
}

#variablesExpander {
    transition: left 0.3s;
}

#consoleArea {
    transition: right 0.3s, display 0.3s allow-discrete;
}

#consoleArea {
    right: calc(var(--layout-consoleArea-width) * -1);
}

#consoleArea.expanded {
    right: 0;

    @starting-style {
        right: calc(var(--layout-consoleArea-width) * -1);
    }
}

#consoleExpander {
    transition: right 0.3s;
}

div.toast {
    backdrop-filter: blur(1rem);
}

div.window {
    backdrop-filter: blur(1rem);
    border-color: #ffffff20;
    background: #20202040;
    transition: transform 0.25s, opacity 0.25s, display 0.25s allow-discrete;
    transform: scale(0.98);
    opacity: 0;
    box-shadow: 0 0.25rem 2rem #00000060;
}

div.window.visible {
    transform: scale(1);
    opacity: 1;

    @starting-style {
        /*Note: this only works properly in chromium-based browsers*/
        transform: scale(1.02);
        opacity: 0;
    }
}

div.window>div.window_bar {
    background: #ffffff20;
}
