* {
    box-sizing: border-box;
    border-radius: 3px;
    font-family: monospace;
    font-size:larger;
}

.container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.calculator {
    border: 2px solid black;
    width: 300px;
    border-radius: 8px;
    background-color:rgb(171, 167, 159);


}

.display {
    border: 1px solid black;
    margin: 5px;
    background-color: rgb(195, 251, 233);
    word-wrap: break-word;
    word-break: break-all;
}

.display1 {
    min-height: 32px;
    font-size: 20px;
    padding-left: 10px;
}
.display2 {
    min-height: 64px;
    font-size: 40px;
    text-align: end;
    padding-right: 10px;
}

.first,.second,.third,.fourth,.fith{
    display: flex;
    justify-content: space-around;
}



.num,.equals,.delete,.clear,.op,.point,.del {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin: 5px;
    height: 50px;
    background-color: aliceblue;
}

.clear,.del {
    background-color: rgb(227, 159, 136);
}

.num:active,.op:active,.clear:active,.point:active,.del:active,.equals:active{
    box-shadow: inset 0px 0px 5px #717070;
}

footer{
    text-align: center;
}