style.css

*{
        font-family: "Odibee Sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin:0;
        padding:0;
}
html{
    height:100vh;
    width:100vw;
}
body{
    height:100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#dis{
    width:100%;
    border-radius:20px ;
    border:none;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    background-color: rgb(59, 58, 58);
    height:120px;
    color:white;
    font-size: 50px;
}
#dis:focus{
    outline:none;
}
#btn{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:2px;
}
.calc{
    background-color: rgb(41, 40, 40);
    max-width: 400px;
    border-radius: 20px;
    padding:0;
    overflow: hidden;
}
button{
    background-color: black;
    font-size: 30px;
    border-radius: 100%;
    border:none;
    color:white;
    width:60px;
    height:60px;
    padding:10px;
    margin:20px;
    cursor:pointer; 
}
button:hover{
    background-color: rgb(71, 70, 70);
}
#op{
    background-color: orange;
    color: black;
}
#e{
    background-color: orange;
    color: black;
}
#c{
    background-color: red;
}