main.css

:root{
    --textbox_text_size: 120px;
    --font_size_buttons: 7vmin;
}
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
.body {
    height: 100vh;
    width: 100vw;
}
.full-page{
    display: grid;
    height: 100%;
    width: 100%;
    grid-template:       "tb tb tb tb tb tb"  3fr
                         "seven eight nine exponentiation undo clear" 1fr
                         "four five six multiply left_parenthesis right_parenthesis" 1fr
                         "one two three divide equals equals" 1fr
                         "zero period subtract add e e" 1fr
                         / 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
}
.full-page div {
    width: 100%;
    height: 100%;
    justify-self: center;
}
button{
    font-size: var(--font_size_buttons)  ;
    width: 100%;
    height: 100%;
    color: white;
    background: linear-gradient(to top, white 50%, rgba(0, 0, 0, 0.900) 50%);
    border: 1px solid white;
    background-size: 200% 200%;
    background-position: top;
    transition: all .25s ease-in;
}
button:hover{
    cursor: pointer;
    background-position: bottom;
    color: black;
    border: 1px solid white;
}
.button_press{
    color: black;
    font-size: calc(var(--font_size_buttons)*1.25);

    border: 1px solid white;
}
.operators{
    background: linear-gradient(to top, white 50%, rgba(0, 0, 0, 0.800) 50%);
    background-size: 200% 200%;
}
.right_side{
    background: linear-gradient(to top, white 50%, rgba(0, 0, 0, 0.700) 50%);
    background-size: 200% 200%;
}
.textarea{
    grid-area: tb;
    color: white;
    background-color: rgba(0, 0, 0, 0.999);
    height: 100%;
    width: 100%;
    font-size: var(--textbox_text_size);
    text-align: center;
    word-wrap: break-word;
    word-wrap: normal;
}
.nine {
    grid-area: nine;

}
.eight {
    grid-area: eight;

}
.seven {
    grid-area: seven;

}
.six {
    grid-area: six;
}
.five {
    grid-area: five;

}
.four {
    grid-area: four;

}
.three {
    grid-area: three;
}
.two {
    grid-area: two;
}
.one {
    grid-area: one;

}
.zero {
    grid-area: zero;

}
.period {
    grid-area: period;
}
.multiply {
    grid-area: multiply;

}
.divide{
    grid-area: divide;

}
.subtract {
    grid-area: subtract;

}
.add {
    grid-area: add;

}
.equals {
    grid-area: equals;

}
.undo {
    grid-area: undo;

}
.clear {
    grid-area: clear;

}
.right_parenthesis{
    grid-area: right_parenthesis;

}
.left_parenthesis{
    grid-area: left_parenthesis;

}
.exponentiation{
    grid-area: exponentiation;
}
.e{
    grid-area: e;
}