mmix-wasm.css

html,body {
    font-family: arial;
    margin: 0px;
    padding: 0px;
}
textarea {
    resize: none;
    border: 1px solid;
    border-radius: 8px;
    border-color: #ccc;
    margin: 4px;
    width: 100%;
    height: calc(100% - 48px);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
#io-container {
    margin: 12px;
    /* subtract top and botton margin from height */
    height: calc(100vh - 2*12px);
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'toolbar toolbar' 'input error' 'output output';
    grid-template-rows: fit-content(100px) auto auto;
}

#toolbar {
    grid-area: toolbar;
    align-self: center;
}
#toolbar > span {
    font-size: 70%;
    display: inline-block;
    margin-left: 20px;
    margin-right: 10px;
    padding-left: 11px;
    padding-right: 11px;
    margin: 10px;
    border: 1px solid;
    border-radius: 8px;
    border-color: #ccc;
    line-height: 40px;
}
#toolbar > span > input {
    margin-left: 5px;
    margin-right: 5px;
    padding: 2px;
    border: 1px solid;
    border-radius: 8px;
    border-color: #ccc;
}

#progress-container {
    /* align-self: center; */
    /* text-align: center; */
}
#status {
    /* align-self: center; */
    /* text-align: center; */
}
#instruction-count {
    /* align-self: center; */
    /* text-align: center; */
}
#g_reg-container {
    background-color: #fdf7ea;
}
#g_reg_num {
    width: 30px;
    text-align: center;
}
#g_reg_val {
    color: bisque;
    font-family: monospace;
    font-size: 160%;
}
#g_reg_val b {
    color: chocolate;
}
#freq {
    width: 60px;
}

#input {
    color: blue;
}
#error {
    color: red;
}
#output {
    color: green;
}

#input_c {
    grid-area: input;
}
#error_c {
    grid-area: error;
}
#output_c {
    grid-area: output;
}

@media only screen and (max-width: 800px) {
    #io-container {
        margin: 12px;
        /* subtract top and botton margin from height */
        height: auto;
        display: grid;
        grid-gap: 10px;
        grid-template-areas: 'input' 'toolbar' 'output' 'error';
        grid-template-rows: 400px auto 400px 120px;
    }

#toolbar > span {
    font-size: 100%;
    line-height: 50px;
}