*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: monospace;
}

*:focus {
    outline: none;
}

:root {
    --BLACK: #1d1f21;
    --WHITE: #c5c8c6;
    --DARK_GREY: #373b41;
    --MED_GREY: #373b41;
    --LIGHT_GREY: #707880;
    --RED: #a54242;
    --LIGHT_RED: #cc6666;
    --GREEN: #8c9440;
    --LIGHT_GREEN: #b5bd68;
    --ORANGE: #de935f;
    --YELLOW: #f0c674;
    --BLUE: #5f819d;
    --LIGHT_BLUE: #81a2be;
    --MAGENTA: #85678f;
    --LIGHT_MAGENTA: #b294bb;
    --TEAL: #5e8d87;
    --LIGHT_TEAL: #8abeb7;

    --HOVER: var(--GREEN);
    --FORGROUND: var(--WHITE);
    --BACKGROUND: var(--BLACK);
    --BUTTON: var(--WHITE);
    --ACTIVE: var(--LIGHT_BLUE);

    --BUTTON-HEIGHT: 80px;
    /*  button height * 8  */
    --KEYBOARD-HEIGHT: 640px;
    /*  button height * 6  */
    --KEYPAD-HEIGHT: 480px;
    /*  button height * 5  */
    --KEYBOARD-WIDTH: 400px;

}

body{
    background-color: var(--BACKGROUND);
    width: 100%;
    height: 100vh;
    padding: 10px;
}


/* ------- screen ------------ */
#screen{
    position: absolute;
    top: 100px;
    left: 420px;
    width: 1000px;
    height: 200px;
    font-size: 20px;
    color: var(--WHITE);
}

#screen .vertical-holder{
    display: flex;
    flex-direction: column;
}

#screen .horizontal-holder{
    display: flex;
    flex-direction: row;
}

#screen .command{
    margin-left: 10px;
    margin-right: 10px;
}

#screen table{
    width: 100px;
}

#screen .clickable{
    cursor: pointer;
}

/* --------- keyboard ------------ */

#keyboard{
    position: absolute;
    top: 10px;
    left: 10px;
    width: var(--KEYBOARD-WIDTH);
    height: var(--KEYBOARD-HEIGHT);
}

#keyboard .input{
    color: var(--WHITE);
    font-size: 30px;
    line-height: 30px;
    width: 100%;
    height: var(--BUTTON-HEIGHT);
    /*text-align: end;*/
}

#keyboard .bittype-holder{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#keyboard .bittype-horizontal{
    display: flex;
    flex-direction: row;
    width: 100%;
}

#keyboard .inc-dec-button{
    flex: 1;
}

#keyboard .bittype-input{
    flex: 3;
    color: var(--WHITE);
    font-size: 40px;
    line-height: 40px;
    text-align: center;
}

#keyboard .horizontal-holder{
    display: flex;
    flex-direction: row;
    height: var(--KEYPAD-HEIGHT);
    width: 100%;
}

#keyboard .scroll-holder{
    flex: 1;
    height: 100%;
    overflow-y: scroll;
}

#keyboard .keyboard-holder{
    flex: 3;
    height: 100%;
}

#keyboard .keyboard-table{
    height: 100%;
    width: 100%;
}

#keyboard .keyboard-table .row{
    display: flex;
    flex-direction: row;
    width: 100%;
}

#keyboard .button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--BUTTON-HEIGHT);
    width: 100%;
    font-size: 20px;
    background-color: var(--BUTTON);
    border: 1px var(--BLACK) solid;
    user-select: none;
}

#keyboard .half-height{
    height: 40px;
}

#keyboard .button-halfer{
    width: 100%;
}

#keyboard .button:hover{
    /*background-color: var(--HOVER);*/
    cursor: pointer;
}

#keyboard .button:active{
    background-color: var(--ACTIVE);
}

#keyboard .spec{
    background-color: var(--ORANGE);
}

#keyboard .hold{
    background-color: var(--LIGHT_BLUE);
}

#keyboard .disable{
    background-color: var(--LIGHT_GREY);
    pointer-events: none;
}

#keyboard .empty{
    background-color: var(--BACKGROUND);
    color: var(--BACKGROUND);
    pointer-events: none;
}