styles.css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fddb00;

}

header{
    padding: 10px;
    background-color: #fbbc00;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    color:whitesmoke;
    text-shadow: 0 0 3px #3D3D41AA;
}


.calculator {
    border-radius: 10px;
    margin: 50px auto;
    width:250px;
    overflow: hidden;
}

.cal-head{
    padding: 15px 0;
    background-color: #a5bacb;
    width:auto;
    box-shadow: inset 0 1px white, inset 0 0 50px #5558;
}

.cal-body {
    padding: 15px;
    background-color:#d8e0e2;
    display: grid;
    width:auto;
    grid-template: repeat(5, 50px) / repeat(4, 50px);
    grid-auto-flow: row;
    grid-gap: 5px;
    justify-content: center;
    box-shadow: inset 0 -1px  black, inset 0 0 50px #5558;
}

.display {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 5px;
    background-color:#d1dcba;
    font-family: "Segment7";
    text-align: right;
    border-radius: 5px;
    width:220px;
    height:50px;
    
}

.display-head {
    font-size: 10pt;
    overflow: hidden;
}

.display-body {
    padding: 5px 0 0 0;
    font-size: 16pt;
}
.btn {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 100%;
    color:white;
    border-radius: 5px;
    border-width:0;
    background-color:#7998ac;
    box-shadow: inset 0 1px white, inset 0 -1px  black, inset 0 0 50px #5558;
}

.btn:focus{
    outline-width: 0;
}


.btn:active{
    box-shadow: inset 0 0 50px #5558;
    border: 2px solid #555 ;
}

.btn.add {
    background-color: #fd8103;
    grid-row-end: span 2;
}

.btn.cmd {
    background-color: #3D3D41;
}