html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #99ADBF;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calc {
    background-color: #F0F3F9;
    width: 320px;
    height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 10% 10% 10% 10% 10% 10%;
    border-radius: 10px;
    padding: 0 4px 4px 4px;
    position: fixed; /*important*/
}

#output, #calculations { text-align: end; margin-right: 4px}

#output {
    font-size: 3em;
    font-weight: 500;
    overflow: auto;
}

#calculations {
    min-height: 1em;
    margin-top: 30%;
    padding-bottom: 15px;
}

.cell {
    text-align: center;
    align-content: center;
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-bottom: 1px solid #CCC;
    font-size: 1.2em;
    margin: 1px;
    border-radius: 4px;
    transition: 40ms ease;
}

.number:hover, .num-like:hover { background-color: #FCFCFC}
.number:active, .num-like:active { background-color: #FFF}

.function:not(.num-like) { background-color: #F9F9F9}
.function:not(.num-like):hover { background-color: #F4F4F4;}
.funtion:not(.num-like):active { background-color: #F9F9F9;}

#btn-equal { background-color: #0067C0;}
#btn-equal:hover { background-color: #1975C5 }
#btn-equal:active { background-color: #6FA8DB }