.container {
	display: flex;
}

#calcDiv {
	flex-grow: 1;
	align-self: stretch;
    display: flex;
	flex-direction: column;
    padding-right: 50px;
    padding-left: 20px;
}

#calcDisp{
    flex-grow: 0;
	align-self: stretch;
    padding-bottom:12px;
}

#calcEqDisp{
    background-color: #fff;
    border-radius: 12px;
    padding: 10px;
    padding-bottom:12px;
    box-shadow: 1px 2px 3px 1px rgba(0,0,0,.5);
}

#calcNumDisp{
    background-color: #fff;
    border-radius: 12px;
    padding: 10px;
    
    box-shadow: 1px 2px 3px 1px rgba(0,0,0,.5);
}

#calcBottomButtons {
	align-self: stretch;
    display: flex;
    padding-top: 4px;
}

#clearHistButtonDiv{
    padding-top: 4px;
    align-self: stretch;
}

#saveInputButtonDiv{
    padding-top: 4px;
    align-self: stretch;
}


#calcEqualsButton{
    flex-grow: 1;
	align-self: stretch;
    padding-right: 2px;
}

#calcBSButton{
    flex-grow: 1;
	align-self: stretch;
    padding-left: 2px;
    padding-right: 2px;
}
#calcPMButton{
    flex-grow: 1;
	align-self: stretch;
    padding-left: 2px;
}

.history-container{
    display:flex;
    background-color: #fff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 1px 2px 3px 1px rgba(0,0,0,.15);
}

#historyDiv {
	flex-grow: 1;
	align-self: stretch;
    display:flex;
    gap:2px;
    flex-direction:column;
}
button {
      width: 100%;
      height: 100%;
}
#calcGridButtons {
  	flex-grow: 1;
	align-self: stretch;
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 4px 4px;
    grid-auto-flow: row;
    grid-template-areas:
    "calcSevenButton calcEightButton calcNineButton calcDivideButton"
    "calcFourButton calcFiveButton calcSixButton calcMultButton"
    "calcOneButton calcTwoButton calcThreeButton calcMinusButton"
    "calcClearButton calcZeroButton calcDecimalButton calcPlusButton";
}

#calcSevenButton { grid-area: calcSevenButton; }

#calcEightButton { grid-area: calcEightButton; }

#calcNineButton { grid-area: calcNineButton; }

#calcPlusButton { grid-area: calcPlusButton; }

#calcMinusButton { grid-area: calcMinusButton; }

#calcMultButton { grid-area: calcMultButton; }

#calcDivideButton { grid-area: calcDivideButton; }

#calcSixButton { grid-area: calcSixButton; }

#calcThreeButton { grid-area: calcThreeButton; }

#calcDecimalButton { grid-area: calcDecimalButton; }

#calcZeroButton { grid-area: calcZeroButton; }

#calcTwoButton { grid-area: calcTwoButton; }

#calcFiveButton { grid-area: calcFiveButton; }

#calcFourButton { grid-area: calcFourButton; }

#calcOneButton { grid-area: calcOneButton; }

#calcClearButton { grid-area: calcClearButton; }