body
{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: beige;
}


#calculator
{
    font-family: Arial, sans-serif;
    background-color: black;
    border-radius: 15px;
    max-width: 500px;
    overflow: hidden;
}

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

button
{
 width: 100px;
 height: 100px;
 border-radius: 50px;
 border:none;
 background-color:rgb(31, 30, 30);
 color:white;
 font-size: 3rem;
 font-weight: bold;
 cursor: pointer; 
}

button:hover
{
    background-color: grey;
}
button:active
{
    background-color: rgb(219, 212, 212);
}


.operator
{
    background-color: orange;
}
.operator:hover
{
    background-color: rgb(201, 151, 57);
}
.operator:active
{
    background-color: rgb(212, 170, 91);
}