body {
    background-color: #f8f9fa;
}
#main{
    width: 70%;
    justify-content: center;
    margin: auto;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75) ;
    background-color: white;
    border-radius: 5px;
}
#result{
    height: 60px;
    border: 1px solid #004789;
    color: black;
    font-size: xx-large;
}
.calculator {
  width: 90%;
  justify-content: center;
  margin: auto;
    
}
.calculator button{
    width:23%;
    height: 70px;
    margin:1%;
    border-radius:10px;
    font-size: 40px;
    border: 1px solid #004789;
}
@media only screen and (min-width:0px) and (max-width:768px) {
    #main{
      width: 98%;
    }
    #result{
        height:40px;
    }
    .calculator button{
        width: 23%;
        height: 40px;
        font-size: 20px;
    }
  
  
  }
@media only screen and (min-width:769px) and (max-width:1000px) {
    #main{
      width: 90%;
    }
    #result{
        height: 50px;
    }
    .calculator button{
        width: 23%;
        height: 50px;
        font-size: 30px;
    }
  
  
  }