* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
}

#title {
	align-self: center;
}

.calculator-container {
	width: 30%;
	height: 100%;
	display: flex;
	justify-content: stretch;
	flex-direction: column;
	flex-wrap: wrap;
	align-self: center;
}

.calculator-container > .display {
	height: 64px;
	flex-basis: 100%;
	background-color: gray;
	text-align: left;
	font-size: 24px;
	padding: 8px;
	line-height: 100%;
}

.calculator-container .buttons {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: flex-start;
}

.buttons > .digits {
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	padding: 0;
	width: 80%;
}
.buttons > .digits > * {
	aspect-ratio: 1;
	width: 33%;
	height: auto;
}

.buttons > .operators {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0;
}
.buttons > .operators > * {
	aspect-ratio: 1;
}
.buttons * {
	font-size: 16px;
}