styles.css

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#header {
    font-family: sans-serif;
    letter-spacing: 0.2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#displayCase {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 510px;
    height: 120px;
    padding: 10px;
    border-radius: 10px;
    background-color: silver;
    border: 1px solid black;
}

#display {
    width: 490px;
    height: 100px;
    background-color: whitesmoke;
    border: 1px solid black;
    border-radius: 10px;
    font-family: "Jersey 15", serif;
    font-weight: 300;
    color: slategray;
    font-size: 84px;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
}

#calcBod {
    width: fit-content;
    display: grid;
    grid-template-columns: 120px 120px 120px 120px;
    grid-template-rows: 120px 120px 120px 120px 120px;
    gap: 10px;
    background-color: silver;
    padding: 10px;
    border-radius: 10px;
}

.square {
    border-radius: 10px;
    color: slategray;
    background-color: white;
    font-size: 32px;
}

#digits {
    grid-column: 1/4;
    grid-row: 2/6;
    display: grid;
    grid-template-columns: 120px 120px 120px;
    grid-template-rows: 120px 120px 120px 120px;
    gap: 10px;

}

#backBut {
    grid-column: 1;
    grid-row: 4;
}

#zero {
    grid-column: 2;
    grid-row: 4;
}

#decimalButton {
    grid-column: 3;
    grid-row: 4;
}

#enter {
    grid-column: 4;
    grid-row: 4/6;
}