style.css

.calculator{
    margin-top:100px;
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 235px;
    min-height: auto;
    background-color: black;
    /* position:relative; */
    left: 35%;
    padding: 10px;
}
.display{
    background-color: black;
    color: white;
    min-height:50px;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 30px;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    /* position: relative; */
    /* top: 60px; */
    word-wrap: break-word;
    word-break: break-all;
    /* text-align-last: right; */
}
.button{
    /* margin: 1px; */
    margin-top: 5px;
    /* margin-bottom: 10px; */
    display: grid;
    row-gap: 3px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    /* position: absolute; */
    /* bottom: 20px; */
}
button{
    margin: 3px;
    border-radius: 50%;
  
    width: 50px;
    height: 50px;
    border-style: none;
    font-size: 20px;
    position: relative;
    left: 3px;
}
#zero{
    grid-column-start: 1;
    grid-column-end: 3;
    width: 109px;
    /* border-radius: 50%; */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    text-align: left;
    padding-left: 20px;
}
.num{
    background-color: #333333;
    color: white;
    font-size: 23px;
    position: relative;
}
.operator, .equal{
    transition: color 0.3s, background-color 0.3s;
    background-color: #FE9505;
    color: white;
    font-size: 23px;
}
.other{
    background-color: #A5A5A5;
    color: #0C0C0C;
}
button:hover{
    border-color: azure;
    border-style: solid;
}
.operatorClicked{
    transition: color 0.3s, background-color 0.3s;
    background-color: white;
    color: #FE9505;
}

.num:active, .other:active{

    background-color: #46475a;
}
.footer{
    position: fixed;
    bottom: 5px;
}
.left{
    left: 10px;
}
.right{
    right: 10px;
}