style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Spartan', Arial, Helvetica, sans-serif;
    background-color: hsl(222, 26%, 31%);
}

.container {
    width: 300px;
    margin: 0 auto;
    transform: translate(-0%, 20%);
}

.result-num {
    background-color: #242D44;
    height: 128px;
    width: 300px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: right;
    padding: 20px;
    color: white;
    font-size: 35px;
}

.row {
    display:flex;
    text-align: center;
}

.numbers {
    background-color: #242D44;
    border-radius: 5px;
    padding: 10px;
}

.num, .ops, .del, .dot {
    padding: 10px 10px;
    background-color: #EAE3DC;
    margin: 10px;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    border-bottom: 3px solid #979797;
    font-size:15px;
}

.num, .equals, .reset, .del, .dot, .ops {
    cursor: pointer;

}

div.del:nth-child(4) {
    color:white;
    background-color: #647198;
    border-bottom: 3px solid #4e5975;
}

.lastRow .reset, .lastRow .equals {
    padding: 10px 10px;
    border-radius: 10px;
    margin: 10px;
    flex: 1;
    color: white;
}



.lastRow .reset {
    background-color: #647198;
    border-bottom: 3px solid #4e5975;
}

.lastRow .equals {
    background-color: #D03F2F;
    border-bottom: 3px solid #98271f;
}