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

body {
   display : flex;
   flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;

}
.container {
    display: flex;
    flex-wrap: wrap;
  width: 20vw;
  min-height: 200px;
 
background-color: #2d3436;
border-radius: 8px;
padding: 6px;
gap:4px;
    
}
.display {
   width:100%;
   height:60px;
   background: #1f2425;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0 12px;
   font-size: 1.4rem;
   font-family: Consolas, monospace;
   border-radius: 6px;
  overflow: hidden;

}
.grid {
 flex: 0 0 calc((100% - (3 * 4px)) / 4); /* 4 columns accounting for 3 gaps */
  aspect-ratio: 1 / 1; /* make each cell square so container height matches content */
  display: flex;
  justify-content: center;
  align-items: center;

  
  background: #3a3f41;
  color: #fff;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  


}