body {
    height: 150vw;
    width: 80vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 200%;
    text-align: center;
    background-image: linear-gradient(to bottom right, rgb(78, 78, 78), rgb(255, 255, 255));
    background-repeat: no-repeat;
    margin: 0 auto;
    filter: drop-shadow(20px 15px 15px #1f1f1f);
}
.calcContainer {
    display: grid;
    grid-template-rows: 80% 20%;
    border: 1px solid rgb(107, 107, 107);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    margin: 0 auto;
    width: 300px;
    height: 350px;
}
.rowOneThroughFour {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    background-color: rgb(168, 168, 168);
    column-gap: 0px;
}
.rowFiveContainer {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: rgb(168, 168, 168);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.rowFiveLeft {
    display: grid;
    grid-template-columns: 100%;
}
.rowFiveRight {
    display: grid;
    grid-template-columns: 50% 50%;
}
.button {
    outline: none;
    background-color: transparent;
    border: 1px solid rgb(99, 99, 99);
    color: white;
    font-size: 25px;
}
.button:active {
    background-color: rgb(190, 190, 190);
}
.buttonZero {
    background-color: transparent;
    border: 1px solid rgb(99, 99, 99);
    border-bottom-left-radius: 20px;
    color: white;
    font-size: 25px;
    outline: none;
    }
.buttonZero:active {
    background-color: rgb(190, 190, 190);
    }
.buttonEq {
    background-color: rgb(49, 112, 247);
    border: 1px solid rgb(99, 99, 99);
    border-bottom-right-radius: 20px;
    color: white;
    font-size: 25px;
    outline: none;
}
.buttonEq:active {
    background-color: rgb(190, 190, 190);
}
.buttonOp {
    background-color: rgb(49, 112, 247);
    border: 1px solid rgb(99, 99, 99);
    color: white;
    font-size: 25px;
    outline: none;
}
.buttonOp:active {
    background-color: rgb(107, 153, 252);
}
.buttonOpTop {
    background-color: rgb(105, 149, 245);
    border: 1px solid rgb(99, 99, 99);
    color: white;
    font-size: 25px;
    outline: none;
}
.buttonOpTop:active {
    background-color: rgb(152, 183, 248);
}
.displayContainer {
    text-align: right;
    text-align: end;    
    color: white;
    width: 298px;
    min-height: 80px;
    max-width: 298px;
    background-color: rgb(70, 70, 70);
    border: 2px solid rgb(107, 107, 107);
    border-bottom: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: right;
    word-wrap: break-word;
    word-break: break-all;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 50px;
}
.display {
    padding: 15px;
}

@media only screen and (max-device-width: 480px) {
    body {
        height: 200vw;
        width: 80vw;    
    }
    .calcContainer {
        width: 700px;
        height: 800px;
        border: 1px solid rgb(107, 107, 107);
        grid-gap: 0px 0px;
    }
    .button {
        font-size: 50px;
    }
    .buttonOp {
        font-size: 50px;
    }
    .buttonOpTop {
        font-size: 50px;
    }
    .buttonEq {
        font-size: 50px;
    }
    .buttonZero {
        font-size: 50px;
    }
    .displayContainer {
        width: 695px;
        min-height: 200px;
        max-width: 695px;
        margin-top: 160px;
        font-size: 100px;
    }
}