body {
    background-color: rgb(49, 39, 39);
    display: flex;
    min-height: 100vh;  /* Add this */
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

.displayContainer {
    background-image: url('images/darkmode/calcDisplay.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: auto;
    padding: 45px 140px;

    object-fit: contain; /*keeps aspect ratio*/
    image-rendering: pixelated;  /* Chrome/Edge */
    image-rendering: crisp-edges; /* Firefox/Safari fallback */
}

.calculatorContainer {
    background-image: url('images/darkmode/calcBG.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: auto;
    padding: 20px 100px;
    object-fit: contain; /*keeps aspect ratio*/
    /*pixel art rendering:*/
    image-rendering: pixelated;  /* Chrome/Edge */
    image-rendering: crisp-edges; /* Firefox/Safari fallback */


    transform: scale(1.7)
}

.buttonsContainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px
}

.buttonsContainer button {
    color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.add { grid-row: span 2; }

button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /*keeps aspect ratio*/
    /*pixel art rendering:*/
    image-rendering: pixelated;  /* Chrome/Edge */
    image-rendering: crisp-edges; /* Firefox/Safari fallback */
}
}