* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    font-size: 22px;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow-y: hidden;
}

#root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.window {
    overflow-y: scroll;
    display: flex;
    height: 100%;
    max-height: 50vh;
    border-top: #222228 2px solid;
}

.wcodes {
    color: #dedede;
    font-family: monospace;
    background: hsl(240, 8%, 12%);
    flex-direction: column;
}

.wmain {
overflow-y: scroll;
display: block;
height: 100%;
max-height: 50vh;
border-top: #222228 2px solid;
}

[codeinput] {
    height: 100%;
    width: 100%;
    padding: 8px;
    word-break: break-all;
}



.chars {
    overflow: auto;
    user-select: none;
    transform: translateY(calc(-100% + 2px));
    position: fixed;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: #111e 2px solid;
    display: flex;
    flex-flow: row;
    justify-content: safe;
}

.chars .dt{
    background: #222228;
    border-right: #000e 2px solid;
    border-top: #000e 2px solid;
    display: inline-flex;
    padding: 0 8px;
    text-align: center;
    justify-content: center;
    flex-basis: 100%;
    transition: 250ms;
    cursor: pointer;
}


.chars .dt:hover{
    background: #3e773cc4;
}