*{
 margin:0; 
 padding:0;
 box-sizing: border-box;  
 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.app{
    display: flex;
    justify-content:center;
    align-items: center;
    height:100vh;
}
.calculator{
  background-color:#1B2430;  
  width:100%;
  max-width: 375px;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  border-radius:2rem;
  overflow:hidden
}
.display{
  min-height:200px;
  padding:1.5rem;
  display:flex;
  justify-content:end;
  align-items: flex-end;
  color:white;
  text-align: right;
  flex:1 1 0%;
}
.display .input{
font-size:1.2rem;
margin-bottom:0.5rem;

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

}
.display .operators{
    color:#19b5c0;
}



.keys{
    background-color: #272d35;
    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);
    grid-gap: 1rem;
    box-shadow:0px -8px 16px rgba(0, 0, 0, 0.2);  

}
.keys .key{
position: relative;
cursor: pointer;
display: block;
height:0;
padding-top:100%;
background-color: rgb(64, 118, 154);
border-radius:1.2rem;
transition:0.5s;
user-select:none;
}

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

}
.keys .key:hover{
    box-shadow:inset 0px 0px 8px rgba(1, 1, 1, 0.9);
}
.keys .key.operator span{
    color:#d1471a
}
.keys .key.action span{
    color: rgb(14, 65, 87);
}