* {
	box-sizing: border-box;
}

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

.calculator {
	width:					320px;
	background:				#333;	/* Color behind buttons; dark gray. */
	padding:				20px;
	border-radius:			16px;
	box-shadow:				0 20px 50px rgba(0,0,0,0.5);	/* Shadow around outside of calulator */
}

.display {
	width:					100%;
	background:				var(--background-color);
	color:					var(--text-color);
	font-size:				1.8rem;
	padding:				15px;	/* Around text in the display. */
	text-align:				right;
	border:					none;
	border-radius:			8px;
	margin-bottom:			20px;
	outline:				none;
	font-family:			monospace;
}

.buttons {
	display:				grid;
	grid-template-columns:	repeat(4, 1fr);
	gap:					10px;
}

button {
	aspect-ratio:			1/1;
	font-size:				1.2rem;
	border:					none;
	border-radius:			8px;
	cursor:					pointer;
	background:				#555;
	color:					white;
	transition:				all 0.1s;
}

button:hover {
	opacity:				0.7;
}

button:active {
	transform:				scale(0.92);
}

.operator {
	background:				#f39c12;
}