.calculator-box {
    width: 600px;
    font-family: Roboto, arial, sans-serif;
}

.display-box {
    height: 72px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    margin: auto;
    padding: 10px 14px 0 10px;
    box-sizing: border-box;
    text-align: right;
    overflow: auto;
}

.display-box:hover {
    border-top: 1px solid #70757a;
    box-shadow: 0 0 3px #dadce0 inset;
}

.history {
    height: 20px;
    color: #70757a;
    font-size: 13px;
}

.result {
    font-size: 30px;
    height: 32px;
}

.logic-box {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.logic-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.logic {
    flex: 1;
    text-align: center;
    cursor: pointer;
    line-height: 34px;
    margin: 4px;
    border-radius: 4px;
    background-color: #dadce0;
    color: #202124;
    border: 1px solid #dadce0;
    font-size: 14px;
}

.logic:active {
    border: 1px solid #70757a;
    box-shadow: 0 0 5px #ccc;
}

.font13 {
    font-size: 13px;
}

.font18 {
    font-size: 18px;
}

.number {
    background-color: #f1f3f4;
    border: 1px solid #f1f3f4;
}

sup {
    font-size: 8px;
    line-height: 8px;
}

.sup-box {
    color: rgb(204, 204, 204);
    font-size: smaller;
}

.equal {
    background-color: #4285f4;
    border: 1px solid #4285f4;
    color: #fff;
    font-weight: bold;
}

.equal:active {
    border: 1px solid #0048bb;
    box-shadow: 0 0 5px #0048bb;
}

.close-bracket {
    color: #dadce0;
}