*{
    font-family: monospace;
    border-radius: 2%;
    background-color: rgb(0, 0, 0);
}
#App{
    width: fit-content;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(6, 70px);
    border: 5px solid grey;
}

#totalDisplay{
    text-align: right;
    background-color: black;
    color: white;
    grid-column-start: 1;
    grid-column-end: 5;
    display: grid;
}

#display{
    max-width: 100%;
    font-size: 25px;
    background-color: black;
    border-color: black;
    color: white;
    max-width: 90%;
    text-align: right;
}

#expression{
    max-width: 100%;
    font-size: 15px;
    background-color: black;
    border-color: black;
    color: rgb(168, 168, 168);
    max-width: 90%;
    text-align: right;
}

#clear{
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: rgb(207, 67, 67);
    color: white;
    font-size: 25px;
}

#equals{
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column-start: 4;
    background-color: rgb(71, 111, 199);
    color: white;
    font-size: 25px;
}

#zero{
    grid-column-start: 1;
    grid-column-end: 3;
}

.bc-gray{
    color: white;
    background-color: rgb(99, 99, 99);
    font-size: 25px;
}

.bc-dark{
    color: white;
    background-color: rgb(59, 59, 59);
    font-size: 25px;
}

.bc-dark:hover{
    background-color: rgb(22, 22, 141);
}

.bc-gray:hover{
    background-color: rgb(86, 16, 151);
}

#equals:hover, #clear:hover{
    background-color: rgb(192, 192, 10);
}

#footer{
    text-align: center;
    color: white;
}