html,
body {
    box-sizing: border-box;
    margin: 0px;
    padding: 0;
    font-family: cursive, fantasy, sans-serif;
    font-size: 36px;
}

.calculator {
    width: 370px;
    background-color: deepskyblue;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(5, 70px);
    border: 2px solid black;
    margin: 100px auto 10px;
    user-select: none;
}

.display {
    overflow: auto;
    height: 104px;
    grid-column: 1 / -1;
    margin: 5px;
    border: 2px solid rgb(55, 54, 54);
    background-color: aliceblue;
}

.task, .answer {
    display: flex;
    font-size: 32px;
    padding: 2px;
    text-align: right;
    align-items: flex-end;
    justify-content: center;
    color: darkgrey;
    min-height: 49px;
}

.key {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background-color: cornflowerblue;
    opacity: 0.7;
    margin: 5px;
    border: 2px solid rgb(55, 51, 66);
    cursor: pointer;
}

.key:hover {
    background-color: rgb(141, 176, 242);;
}