style.css

body {
    font-family: 'Popins', sans-serif;
    background-color: rgb(201, 61, 19);
}

.container {
  width: 1000px;
  height: 600px;
  margin: 20px auto;
}

.calculator {
   width: 340px;
   height: 550px;
   background-color: aliceblue;
   margin: 0 auto;
   top: 30px;
   position: relative;
   border-radius: 1rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.result {
    height: 130px;
}

.history {
    text-align: right;
    height: 22px;
    margin: 0 22px;
    padding-top: 22px;
    font-size: 16px;
    color: rgb(5, 4, 0);
}

.output {
    text-align: right;
    height: 65px;
    margin: 11px 22px;
    font-size: 33px;
}

.keyboard {
    height: 440px;
}

.operator, .number, .empty {
    width: 55px;
    height: 55px;
    margin: 15px;
    float: left;
    border-radius: 50%;
    border-width: 0;
    font-weight: bold;
    font-size: 16px;
}

.number, .empty {
    background-color: rgb(230, 231, 233);
}

.operator {
    background-color: rgb(222, 233, 233);
}

.number, .operator {
    cursor: pointer;
}

.operator:active, .number:active {
    font-size: 14px;
}

.operator:focus, .number:focus, .empty:focus {
    outline: 0;
}

.operator:nth-child(4) {
    font-size: 22px;
    background-color: bisque;
}

.operator:nth-child(8) {
    font-size: 22px;
    background-color: bisque;
}

.operator:nth-child(12) {
    font-size: 22px;
    background-color: bisque;
}

.operator:nth-child(16) {
    font-size: 22px;
    background-color: bisque;
}

.operator:nth-child(20) {
    font-size: 22px;
    background-color: bisque;
}