styles.css

* {
    margin: 0;
    box-sizing: border-box;
}

/* Make body full screen for centering */
html,
body {
	height: 100%;
}

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

.main {
    border: 2px solid white;
	background-color: black;
	border-radius: 0px 0px 20px 0px;
	height: 700px;
	width: 500px;
	padding: 5px;

	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.display {
    background-color: #11e3eb;

	box-sizing: content-box;
	padding: 20px;
	border: 10px solid black;

	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-content: flex-end;
}

#display-txt {
    font-weight: 400;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.buttons {
	flex: 2;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.button-row {
	flex: 1;
	display: flex;
}

button {
	flex: 1;
	font-size: 28px;
	border: 2px solid black;
	border-radius: 4px;
	cursor: pointer;
}

button:hover {
	filter: brightness(90%);
}

button:active {
	filter: brightness(70%);
}

button.specialButton {
	background-color: #eb662f;
}

button.operatorButton {
	background-color: #413b38;
	color: white;
}