:root {
    --blur: 0.7px;
    --titlebar-height: 30px;
    --titlebar-button-width: 30px;
    --frame-height: 60px;
    --frame-width: 0px;
    --editor-padding: 5px;
    --black: #000000;
    --blue: #0000D7;
    --red: #D70000;
    --magenta: #D700D7;
    --green: #00D700;
    --cyan: #00D7D7;
    --yellow: #D7D700;
    --white: #FFFFFF;
    --grey: #D7D7D7;
}

body {
    background-color: var(--black);
    font-family: "ZX Spectrum", monospace;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#titlebar {
    -webkit-app-region: drag;
    user-select: none;
    cursor: default;
    height: var(--titlebar-height);
    width: 100%;
    background-color: var(--black);
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
}

/* #titlebar::before {
    -webkit-app-region: no-drag;
    content: " ";
    height: 5px;
    width: 100%;
    position: absolute;
} */

#titlebar>#title {
    left: var(--titlebar-button-width);
    padding-left: 10px;
    position: absolute;
    line-height: var(--titlebar-height);
}

#titlebar>.titlebar-button {
    width: var(--titlebar-button-width);
    text-align: center;
    position: absolute;
    line-height: var(--titlebar-height);
    -webkit-app-region: no-drag;
}

#titlebar>.titlebar-button:hover {
    background-color: var(--red);
}

#titlebar-close-button {
    right: 0;
}

#titlebar-maximize-button {
    right: var(--titlebar-button-width);
}

#titlebar-minimize-button {
    right: calc(var(--titlebar-button-width) + var(--titlebar-button-width));
}

#titlebar-menu-button {
    transform: rotate(90deg);
    letter-spacing: -10px;
    left: 0;
    text-align: left !important;
}

#frame-bottom {
    height: var(--frame-height);
    width: 100%;
    background-color: var(--black);
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

#frame-bottom>.rainbow {
    background: -webkit-gradient(linear, left center, right center, from(#F24C3D), color-stop(24%, #F24C3D), color-stop(25%, #E6DF15), color-stop(49%, #E6DF15), color-stop(50%, #66DD23), color-stop(74%, #66DD23), color-stop(74%, #24F0FF), color-stop(100%, #24F0FF));
    width: 60px;
    height: 150px;
    opacity: 1;
    transform: rotate(25deg);
    position: absolute;
    bottom: -25px;
    right: 10px;
}

#container {
    margin-top: var(--titlebar-height);
    height: calc(100vh - var(--titlebar-height) - var(--frame-height));
    width: calc(100% - var(--frame-width) - var(--frame-width));
    margin-left: var(--frame-width);
}

.monaco-editor .cursor {
    animation: 0.7s blink step-end infinite;
}

.monaco-editor {
    padding-top: var(--editor-padding);
}

.monaco-editor .vs, .monaco-editor .margin {
    filter: blur(var(--blur));
}

#container[crt-flicker=true]::after {
    content: " ";
    display: block;
    position: absolute;
    top: var(--titlebar-height);
    left: var(--frame-width);
    bottom: var(--frame-height);
    right: var(--frame-width);
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    animation: flicker 0.15s infinite;
    pointer-events: none;
}

#container[crt-grid=true]::before {
    content: " ";
    display: block;
    position: absolute;
    top: var(--titlebar-height);
    left: var(--frame-width);
    bottom: var(--frame-height);
    right: var(--frame-width);
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

#container[crt-animations=true].turn-off>.monaco-editor {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}

#container[crt-animations=true].turn-on>.monaco-editor {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}

@keyframes flicker {
    0% {
        opacity: 0.8;
    }
    20% {
        opacity: 0.71;
    }
    40% {
        opacity: 0.83;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0.76;
    }
    100% {
        opacity: 0.92;
    }
}

@keyframes blink {
    0% {
        background-color: var(--blue);
        color: var(--white);
    }
    50% {
        background-color: var(--white);
        color: var(--blue);
    }
}

@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        filter: brightness(50);
    }
}

@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(30);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(30);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: brightness(0);
        opacity: 0;
    }
    12% {
        filter: brightness(0) blur(var(--blur));
    }
    99% {
        filter: brightness(1) blur(var(--blur));
    }
    100% {
        filter: blur(var(--blur));
        opacity: initial;
        transform: initial;
    }
}