body {
    font-family: Arial, Helvetica, sans-serif;
}
.calculator {
    padding: 5px 8px 10px 5px;
    border-radius: 1em;
    height: 700px;
    width: 500px;
    margin: auto;
    background-color: #182330;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 5px 10px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box-num {
    background-color: white;
    border: solid black 0px;
    padding: 8px 3px 8px 0px;
    font-weight: bold;
    text-align: right;
    color: black;
    border-radius: 2px;
    width: 100%;
    height: 90%;
}

.display-box {
    background-color: white;
    border: solid black 0px;
    padding: 8px 0px 8px 3px;
    font-weight: bold;
    color: black;
    border-radius: 2px;
    width: 100%;
    height: 90%;
}

.header {
    margin-top: 15px;
    font-size: large;
    background-color: #979797;
    padding: 8px 0px 8px 3px;
    border: solid black 0px;
    color: white;
    border-radius: 2px;
    width: 100%;
    height: 90%;
}
.input-box {
    border: solid black 0px;
    background-color: #f8fe85;
    color: black;
    text-align: right;
    padding: 8px 3px 8px 0px;
    border-radius: 2px;
    font-weight: bold;
    width: 100%;
    height: 90%;
}
.highlight {
    border: solid black 0px;
    background-color: #3bc889;
    padding: 8px 3px 8px 0px;
    font-weight: bold;
    text-align: right;
    color: white;
    border-radius: 2px;
    width: 100%;
    height: 90%;
}
.cost{
    border: solid black 0px;
    background-color: #ff6464;
    padding: 8px 3px 8px 0px;
    font-weight: bold;
    text-align: right;
    color: white;
    border-radius: 2px;
    width: 100%;
    height: 90%;
}

.title-box {
    font-size: x-large;
    background-color: #ffbd6700;
    border-radius: 2px;
    border: solid black 0px;
    padding: 8px 0px 8px 3px;
    color: white;
    width: 100%;
    height: 90%;
}

input[type=button] {
    font-size: large;
    background-color: #ffbd67;
    color: black;
    border: solid black 0px;
    width: 100%;
    border-radius: 2px;
    height: 90%;
}