style.css

.contain{
   height:100vh;
   width:100%;
   background-color:#283149;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   
}

.cal{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:5%;
    height:500px;
    width:300px;
    background-color:#111827 ;
    border: white 1px solid;
    border-radius: 10px;
} 
input{
    color:antiquewhite;
    background-color: #111827;
    border: 0;
}
.NUMBER{
   
    height:350px;
    width:100%; 
}
.in{
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 70px;
    height: 150px;
    width:95%;

}
.key:hover{
    /* border:.5px solid white; */
    box-shadow: 30px 3px 4px 30;
    opacity: 0.5;

}

.key{
    background-color:#111827;
    color:#9333ea;;
    margin-top: 7px;
    margin-left: 15px;
    margin-right:5px;
    height:50px;
    width:50px;
    border-radius: 100px;
    font-size: 40px;
    border: 0;
}
.operator{
    color:#01d293;
 
    /* background-color:  ora; */
    /* color: #ffffff; */
}