*{
  text-align: center;
  background-color: black;
  color: whitesmoke;
}
#clear {
  background-color: greenyellow;
}
#equal{
  background-color: moccasin;
}

#container{
    /* background-color: aqua; */
    height: 100vh;
    width: 50vw;
    margin: auto;
    border: 1px solid green;
    box-shadow: 2px  2px 20px white;
    display: flex;
    flex-direction: column;
}

#result{
  background-color:whitesmoke;
  color: black;
  font-size: 50px;
  height: 100%;
  width: 99%;
  text-align: end;

}
#contant-box{
   flex-basis: 1%;
   /* background-color: antiquewhite ; */
   border-radius: 30px;
  
}
#result-box{
  flex-basis: 19%;
  border-radius: 30px;
  
  /* background-color: red; */
}
#button-box{
  flex-basis: 80%;
  /* background-color: blue; */
  

}
#numbers{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4,2fr);
  gap: 0.5rem;
  border-radius: 30px;
  border-color: aliceblue;
  /* background-color: ; */
}
button{
  background-color: white;
  border-radius: 50%;
  color: black;
  font-size: xx-large;
  box-shadow: inset -1px 0px  -5px 1px white;
}
button:hover {
  background-color:rgb(246, 205, 205);
}

@media only screen and (max-width: 500px) {
  button {
    font-size:medium ;
  }
}