body{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px
}

.calculator {
    height: 500px; 
    width: 400px;
    background: purple;
    border: 10px solid hotpink;
    border-radius: 8px;
    display: flex;
    flex-direction: column
}
.display{
    background: rgb(182, 187, 184);
    flex: 1 1 0;
    margin: 6px 6px 8px 6px; /* Top, Right, Bottom, Left */
    color:black;
    font: 60px 'Comic Sans MS', 'Comic Sans', cursive;
    display: flex;
    justify-content: right;
    padding-right: 10px;
    align-items: center;
}
.keypad{
    flex: 4 1 0;
    display:flex;
    flex-direction: column;
    gap: 5px;
}
.key-row{
    flex: 1 1 0;
    display: flex;
    gap: 5px;
}
.key{
    flex: 1 1 0;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color:black;
    font: 20px 'Comic Sans MS', 'Comic Sans', cursive;
    border-radius: 3px;
}
.basic-operation{
    background-color: salmon
}
.basic-operation:active{
    background-color: rgb(246, 115, 101)
}
.special-operation{
    background-color:pink
}
.special-operation:active{
    background-color: rgb(253, 171, 185)
}

.number{
    background-color:white;
    color:firebrick
}
.number:active{
    background-color: lightgrey;
}
#zero{
    flex: 2.05 1 0;
}