@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Karla:ital,wght@0,200..800;1,200..800&family=Noto+Color+Emoji&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

main {
    overflow: hidden;
}

article#Console {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0.5em;

    * {
        box-sizing: border-box;
    }

    div#output {
        height: 100%;
        border-radius: 0.5em;
        padding: 0.5em;
        background-color: black;
        display: flex;
        flex-direction: column;
        color: white;
        font-family: "Source Code Pro", monospace;
        overflow-y: auto;

        span {
            overflow-wrap: anywhere;
            max-width: 100%;
        }

        span.console-out-line {
            >span.io { color: blue; }
            >span.err {color:red;}
            >span.his {color:darkorchid;}
        }

        span#UserInputLine {
            >span.bin {
                color: lightseagreen;
            }
            >span.sel {
                background-color: white;
                color: black;
            }
            >span.wait {
                color: grey !important;
            }

            &.un-frozen>span.sel {
                animation: blink 1s step-start 0s infinite;
            }
        }
    }
}

@keyframes blink {
    50% {
        background-color: black;
        color: white;
    }
}