body {
    margin: 2vh 0 0 0;
}

#container {
    height: 95vh;
    width: 95vw;
    margin: auto;
    border: 4px solid white;
    box-shadow: 0 0 4px 4px #d0d0d0;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "display display display display" 
        "clear backspace divide multiply" 
        "seven eight nine subtract" 
        "four five six add" 
        "one two three add" 
        "zero decimal evaluate evaluate";
}

@media (min-width: 1000px) {
    #container {
        width: 50vw;
    }
}

#display {
    border: 1px solid white;
    border-radius: 8px;
    background-color: #949BA0;
    grid-area: display;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

#display #sub-display {
    display: flex;
    align-items: center;
    height: 20%;
    width: 100%;
}

#display #main-display {
    display: flex;
    align-items: center;
    height: 80%;
    width: 100%;
}

#display #sub-display span {
    width: 98%;
    font-size: 3vh;
    font-family: 'Crimson Text', serif;
    font-weight: 500;
}

#display #main-display span {
    width: 98%;
    font-size: 8vh;
    font-family: 'Crimson Text', serif;
    font-weight: 700;
}

button {
    border: 1px solid white;
    border-radius: 8px;
    outline-width: 0;
    font-size: 6vh;
    font-family: 'Crimson Text', serif;
    font-weight: 700;
    transition: all .07s ease;
}

button:hover {
    background-color: #D07E68;
}

button:active {
    background-color: #AE472C;
}

.pulse {
    transform: scale(1.1);
    border-color: #AE472C;
    box-shadow: 0 0 1rem #AE472C;
}

.erase {
    background-color: #7A9E7E;
}

.operator {
    background-color: #9DACB2;
}

.digit {
    background-color: #BCD4DE;
}

#Escape {
    grid-area: clear;
}

#Backspace {
    grid-area: backspace;
    font-size: 10vh;
    padding-bottom: 3vh;
}

.divide {
    grid-area: divide;
}

.multiply {
    grid-area: multiply;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.nine {
    grid-area: nine;
}

.subtract {
    grid-area: subtract;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.one {
    grid-area: one;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.add {
    grid-area: add;
}

.zero {
    grid-area: zero;
}

.decimal {
    grid-area: decimal;
}

.evaluate {
    grid-area: evaluate;
}