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




body {
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: Arial, Helvetica, sans-serif;
}



.container {
   margin-top: 120px; 
   background-color: rgb(16, 16, 16);
   padding: 14px;
   border-radius: 10px;
   width: 100%;
   max-width: 315px;
}


#display {
   background-color: white; 
   width: 100%; 
   height: 55px;
   padding: 17px;
   border-radius: 5px;
   outline: none;
   margin-bottom: 20px;
   font-size: 1.3rem;
   text-align: right;
}



.btn-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}



button {
   color: white; 
   padding: 22px;
   border-radius: 50%;
   font-size: 1.3rem;
   border: none;
   /* font-weight: bold; */
   cursor: pointer;
}



.number, .clear, .dot {
   background-color: rgb(50, 50, 50); 
}


.operator {
   background-color: rgb(45, 77, 147); 
}


.equal {
  background-color: rgb(66, 120, 235);    
}



.number:active, .clear:active, .dot:active {
   background-color: rgb(73, 73, 73); 
}


.operator:active, .equal:active {
   background-color: rgb(62, 97, 174); 
}