styles.css

css                                                                                                                                                                                                         *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, rgb(58, 76, 96), rgb(77, 78, 109), rgb(81, 62, 184));

}

table{
    margin: auto;
    margin-top: 0.8rem;
}

 input{
     font-size: 1.7rem;
     height: 6rem;
     border: none;
     text-align: end;
     font-weight: bold;
     background-color: white;
     color:black;
 }

 button{
    font-size: 1.5rem;
    width: 3.8rem;
    height: 3.8rem;
    margin: 1rem;
    border-radius: 50%;
    border-width: 0;
    font-weight: 500;
 }

 button:hover{
    background: #feffff;
    background-image: -webkit-linear-gradient(top, #2c0624, #275978);
    background-image: -moz-linear-gradient(top, #b0b8bd, #c4c9cc);
    background-image: -ms-linear-gradient(top, #b0b8bd, #c4c9cc);
    background-image: -o-linear-gradient(top, #b0b8bd, #c4c9cc);
    background-image: linear-gradient(to bottom, #b0b8bd, #c4c9cc);
    text-decoration: none;
 }

 .calculator{
     display: inline-block;
     background:black;
     margin: 1rem;
     padding: 0.5rem;
     border-radius: 0.3rem;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) , 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 .calculator .c1{
     background-color: brown;
 }

 .calculator .c2{
     background-color: aquamarine;
 }

 .calculator .c3{
    background-color: rgb(199, 226, 236);
}

.calculator .c4{
    background-color: rgb(243, 162, 162);
}

.calculator .clr{
    background-color: rgb(182, 240, 249);
}