/* ANNOYING FLEX STUFF */

html, body, .full-ui, .calculator-button-box, #operators, #non-operators, .row, .last-row, .last-row > * {
    display: flex;
}

html, body, .calculator-button-box, .row, .last-row {
    flex-direction: row;
}

#operators, #non-operators, .full-ui {
    flex-direction: column;
}

.calculator-button-box, #non-operators, .row, .last-row, .binary-operator, .row > *, .last-row > *, [id='0'], [id='.'] {
    flex: 1
}

html, body {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: antiquewhite;
}

.full-ui {
    width: 30%;
    height: 60%;
}

#input-box {
    flex-basis: 25px;
}

#operators {
    flex: .33333;
}

.last-row > :last-child {
    flex: 0.5;
}

/* ACTUAL STYLING */
* {
    font-family: 'Seven Segment', sans-serif;
}

#input-box, button {
    background-color: black;
    color: white;
    border-style: outset;
    border-width: 3px;
    border-color: gray;
    font-size: 20px;
}