body{
    /* display: flex; */
    background-color: rgb(118, 118, 39);
}
#calculator{
    background-color: rgb(100, 91, 91);
    height: 700px;
    width: 40%;
    margin: auto;
    padding: 25px;
    border-radius: 20px;
    overflow: auto;
}
button{
    width: 60%;
    height: 100px;
    border-radius: 20px;
    font-size: 3em;
    background-color: rgb(201, 201, 22);
    font-weight: bold;
    cursor: pointer;
    border: none;
}
.press{
    background-color: rgb(165, 104, 42); 
}
.press:hover{
  background-color: rgb(201, 132, 64);
}
.press:active{
    background-color: rgb(226, 159, 91);
}
button:hover{
    background-color: rgb(163, 163, 13);
}
button:active{
    background-color: rgb(228, 228, 11);
}
#keys{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 5px;
}
#display{
    background-color: rgb(201, 201, 22);;
    color: black;
    width: 100%;
    height: 100px;
    border-radius: 20px;
    font-size: 3em;
    text-align: right;
    border: none;
    font-weight: bold;
}
@media screen and (max-width: 1020px){
  button{
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 814px){
  button{
    width: 90%;
    height: 70px;
    gap: 2px;
    font-size: 2em;
  }
  #keys{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
#display{
    font-size: 2em;
}
} 
@media screen and (max-width: 278px){
  button{
    width: 40px;
    height: 50px;
    font-size: 1.5em;
  }
   #keys{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}
#display{
    font-size: 1.5em;
}
#calculator{
    height: 600px;
}
} 
@media screen and (max-width: 173px){
  button{
    width: 70px;
    height: 70px;
    padding: 5px;
    background-color: rgb(171, 121, 29);
  }
  .press{
    background-color: rgb(229, 48, 48);
  }
   #keys{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2px;
}
#calculator{
    height: 900px;
}
}