body{
margin: 0;
display: flex;
justify-content: center;
align-items: top;
height: 100vh;
background-color: hsl(0, 0%, 95%);

}
#keys{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 25px;
}
#display{
width: 100%;
padding: 20px;
font-size: 5rem;
color: white;
border: none;
background-color: hsl(0, 0%, 15%);
text-align: left;

}
#calculoter{
border-radius: 15px;
font-family: Arial, Helvetica, sans-serif;
background-color: hsl(0, 0%, 20%);
max-width: 500px;
overflow: hidden;

}
button{
width: 80px;
height: 80px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 30%);
color: white;
font-size: 3rem;
font-weight: 3rem;
cursor: pointer;
}
button:hover{
background-color: hsl(0, 0%, 40%); ;


}



button:active{
background-color: hsl(0, 0%, 50%); ;


}
.calculoter-btn{
background-color: hsl(35, 100%, 55%); ;


}
.calculoter-btn:hover{
background-color: hsl(35, 100%, 65%); ;


}
.calculoter-btn:active{
background-color: hsl(35, 100%, 75%); ;


}