style.css

@font-face {
    font-family: RobotoMono;
    src: url(/fonts/RobotoMono-VariableFont_wght.ttf);
  }

body{
    background-color: rgb(223, 223, 223);
    margin-top: 2%;
    font-family: RobotoMono;
    
}
   
.container{
        margin: auto;
        width: 34%;
        height: 400px;;
        border-radius: 5px;
        border: rgb(65, 65, 65) solid 6px;
        padding-top: 16px;
        background-color: rgb(56, 63, 61);   
        
    }
    
.buttons{
        display: grid;
        grid-template-columns: 20%  20%  20% 124px;
        grid-template-rows:  50px 50px 50px 50px 50px;
        grid-gap: 10px;
        margin-top: 30px;
        align-items: center;
        justify-content: center;   
}
    
   
.buttons input{
        font-size: 22px;
        background-color: #64278f;
        color: white;
        border: solid black 0.5px;
        width: 100%;
        border-radius: 4px;
        height: 100%;
}
    
#equalBtn{
        grid-column: 1 / span 3;
        grid-row: 5;
        background-color: rgb(205, 147, 59);
}

.buttons .operator{
        background-color: #316346;
}

#backSpace{
        background-color: #9a4d4d;
}

.display input{
        display: block;
        width: 82%;
        padding: 0px 28px;
        background-color: rgb(208, 208, 213);
        color: rgb(16, 16, 17);
        margin: auto;
        text-align: right;
        font-size: 42px;
        border-radius: 5px; 
}