*,
*::before,
*::after {
	box-sizing: border-box;
	font-family: Gotham Rounded, sans-serif;
	font-weight: normal;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: linear-gradient(to right, #adb5a8, #8a9d7e, #adb5a8);
}

.container {
	width: 400px;
	margin: auto;
	border: 1px solid #717171;
}

.screen {
	display: flex;
	align-items: center;
	justify-content: space-around;
	align-items: flex-end;
	flex-direction: column;
	word-wrap: break-word;
	word-break: break-all;

	height: 120px;
	background-color: #2b4343;
	color: #e8e8e8;
	padding: 5px;
}

.previous-operand {
	font-size: 23px;
	opacity: 0.8;
}
.current-operand {
	font-size: 30px;
}

.keyboard {
	height: 500px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.keyboard-button {
	font-size: 30px;
	cursor: pointer;
	background-color: #cecece;
	border: 1px solid #a9a9a9;
	min-width: 90px;
	outline: none;
}

.keyboard-button:hover {
	background-color: #e3e3e3;
}

.span-two {
	grid-column: span 2;
}

@media (max-width: 400px) {
	.container {
		width: 300px;
		height: 500px;
	}
	.keyboard {
		height: 378px;
	}
	.keyboard-button {
		min-width: 60px;
	}
}