body {
    background-color: black;
    width: 130px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: thin solid white;
    border-radius: 10px;

}

#display {
    border: thin solid white;
    background-color: rgb(186, 204, 219);
    text-align: right;
    padding-right: 5px ;
    border-radius: 5px;
    width: 115px;
    
}

button{
    height: 30px;
    width: 30px;
    border-radius: 5px;
    margin: auto;
    background-color: rgb(250, 250, 250);
  
  
}
#buttons {
    display: grid; 
    margin-top: 5px;
    border-radius: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
   
    
}
.numberButtons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  
}
.operatorButtons{
    display: grid;
    grid-template-rows: 1fr;
    margin:auto;
   
    
}
.bottomRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
   
    grid-column: span 3;
}

.operator {
    background-color: orange;
    text-align: center;
    margin: auto;
    display: grid;
    grid-column: 4;
}

#clear, #equals {
    background-color: rgb(206, 205, 205);
   
}

button:hover {
    background-color: rgb(112, 178, 231);
}
#clear:hover, #equals:hover {
    background-color: rgb(112, 178, 231);
}