*, *::before, *::after {
box-sizing: border-box;
font-family:'Courier New', Courier, monospace;
font-weight: normal;
}

body{
padding:0;
margin:0;
background: linear-gradient(to right, #00AA52, #54FFAA);
}
.calculator-grid{
display: grid;
justify-content: center;
align-content: center;
height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto)repeat(5, 100px);
}
.calculator-grid button{
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid white;
    outline: none;
    background-color: rgba(255, 255, 255, .75);
    text-align:center;
}
.calculator-grid button:hover{
    background-color: rgba(255, 255, 255, .90);
}
.span-two{
    grid-column: span 2;
}
.output{
grid-column: 1/-1;
background: rgba(0,0,0,0.75);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap:break-word;
word-break: break-all;
}
.output .previous-operand{
    color:rgba(255,255,255,.75);
    font-size: 1.5rem;
}
.output .current-operand{
    color:white;
    font-size: 2.5rem;
}


@media only screen and (max-width: 1200px) {
    body{
        padding:0;
        margin:0;
        background: linear-gradient(to right, #00AA52, #54FFAA);
        }
        .calculator-grid{
        display: grid;
        justify-content: center;
        align-content: center;
        height: 100vh;
        grid-template-columns: repeat(4, 40px);
        grid-template-rows: minmax(50px, auto)repeat(5, 40px);
        }
        .calculator-grid button{
            font-size: 0.8rem;
            border: 1px solid white;
            outline: none;
            background-color: rgba(255, 255, 255, .75);
        }

        .span-two{
            grid-column: span 2;
        }
        .output{
        grid-column: 1/-1;
        background: rgba(0,0,0,0.75);
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-direction: column;
        padding: 10px;
        word-wrap:break-word;
        word-break: break-all;
        }
        .output .previous-operand{
            color:rgba(255,255,255,.75);
            font-size: 0.9rem;
        }
        .output .current-operand{
            color:white;
            font-size: 1.1rem;
        }
}