style.css

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body{
   background-color: darkgray;
}
.wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.calculator{
   background-color: #22252d;
   width: 100%;
   min-height: 640px;
   max-width: 375px;
   display: flex;
   flex-direction: column;
   border-radius: 1.5rem;
   overflow: hidden;
}

.display{
   min-height: 200px;
   padding: 1.5rem;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end ;
   color: white;
   text-align: right;
   flex: 1 1 0%;
}

.display .input{
   font-size: 1.25rem;
   margin-bottom: 0.5rem;
}

.display .output{
   font-size: 3rem;
   font-weight: 700;
   max-width: 100%;
   overflow: auto;
   width: 100%;
}

.display .operator{
   color: orangered;
}

.display .brackets, 
.display .percent{
   color: forestgreen;
}

.keys{
   background-color: #292d36;
   padding: 1.5rem;
   border-radius: 1.5rem 1.5rem 0 0; 
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(5, 1fr);
   gap: 1rem;
   box-shadow: 0px -2px 16px rgba(0, 0, 0, 0.2);
}

.keys .key{ 
   position: relative;
   cursor: pointer;
   display: block;
   height: 0;
   padding-top: 100%;
   background-color: #262933;
   border-radius: 1rem;
   transition: 0.2s;
   user-select: none;
}

.keys .key span{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2rem;
   font-weight: 700;
   color: white;
}

.keys .key:hover{
   box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2);
}

.keys .key.operator span{
   color: orangered;
}

.keys .key.action span{
   color: cyan;
}