style.css

*{
     margin : 0;
     padding : 0;
     font-family : 'Poppins', sans-serif;
     box-sizing: border-box;
}
.container{
     width:100%;
     height:100vh;
     background-color: lavender ;
     display:flex;
     align-items:center ;
     justify-content: center;
}
.calculator{
     background: #3a4452;
     padding:20px;
     border-radius:10px;
     
}
.calculator form input{
     border:0;
     outline:0;
     width:60px;
     height:60px;
     border-radius: 10px;
     box-shadow: -8px -8px 15px rgba(225, 225, 225, 0.1),5px 5px 15px rgba(0,0,0,0.2);
     background:transparent;
     font-size:25px;
     font-weight:550;
     color:#fff;
     cursor:pointer;
     margin:10px;
     color:orange;
}
.calculator form input:hover{
     background-color:#3a4452;
    
    font-size: xx-large;
}
form .display{
     display:flex;
     justify-content:flex-end;
     margin:20px 0;
}
form .display input{
     text-align:right;
     flex:1;
     font-size: 45px;
     background:lightblue;
}
form input.equal{
     width:145px;
}
form input.operator{
     color:black;
     background: yellowgreen;
}
form input.operator:hover{
     background-color:#3a4452;
    color:orange;
    font-size: xx-large;
}