/* Holds the display and all the rows vertically centred */
.calc {
    /* Calculator is fixed size and horizontally-centered */
    height: 420px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;

    /* Contains rows which are evenly spaced */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Display of the calculator */
.calc-display {
    background: grey;
    width: 250px;
    height: 50px;
    font-size: 24pt;
    text-align: right;
}


/* Holds text in the display of the calculator */
.calc-display-text {
    padding-top: 7px;
    padding-right: 5px;
    font-size: 24pt;
    text-align: right;
}

/* Row of 5 calc-buttons */
.calc-button-row {
  width: 250px;
  background: white;
  display: flex;
  justify-content: space-between;
}

/* Calculator button */
.calc-button {
    background: black;
    width: 50px;
    height: 50px;
}

/* Override background colour for AC and CE buttons */
.calc-button-clear {
    background: red
}

/* Labels for buttons */
.calc-button-label {
    font-size: 24pt;
    font-style: italic;
    color: white;
    text-align: center;
    width: 50px;
    padding-top: 7px;
}

.calc-debug-box {
  height: 50px;
}