/*HTML*/
/*
* {
    background-color: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
*/
:root {
    --menuW: 0rem;
    --bg: rgb(55, 55, 55);
}

* {
    user-select: none;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 100vh;
    overflow-anchor: none;
    background-color: var(--bg);
}

@media (orientation: landscape) {
    #frm {
        width: calc(100vw - var(--menuW));
        height: 100vh;
        transform: none;
    }

    .dialog {
        width: calc(100vw - var(--menuW));
        height: 100vh;
        transform: none;
        left: var(--menuW);
        top: 0;
    }

    #leftMenu {
        bottom: 0;
        left: 0;
        top: 0;
    }
}

@media (orientation: portrait) {
    #frm {
        width: calc(100vh - var(--menuW));
        height: 100vw;
        transform: rotate(90deg) translate(-100vw);
    }

    .dialog {
        width: calc(100vh - var(--menuW));
        height: 100vw;
        left: 0;
        top: var(--menuW);
        transform: rotate(90deg) translate(-100vw);
    }

    #leftMenu {
        right: 0;
        left: 0;
        top: 0;
    }
}

#frm {
    background-color: var(--bg);
    transform-origin: bottom left;
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    padding-left: var(--menuW);
}

#scrollArea {
    background-color: var(--bg);
    color: rgb(214, 214, 214);
    left: var(--menuW);
    top: 0;
    height: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
}




/*SVG*/

#svgCanvas {
    background-color: var(--bg);
}

text {
    fill: white;
}