style.css

html {
	font-size: 62.5%;
	box-sizing: border-box;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

body {
	font-family: "Roboto", sans-serif;
}

.calculator {
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
}

.calculator-screen {
	width: 100%;
	font-size: 6rem;
	letter-spacing: 0.0125rem;
	height: 80px;
	border: none;
	background-color: #000;
	color: #fff;
	text-align: right;
	padding-right: 20px;
	padding-left: 10px;
}

button {
	height: 90px;
	background-color: #e0e0e0;
	border: none;
	font-size: 3rem;
	color: #333;
	cursor: pointer;
}

button:hover {
	background-color: #f5f5f5;
}

button:active {
	background-color: #bdbdbd;
}

.operator {
	background-color: #ffb74d;
	color: #fff;
}

.operator:hover {
	background-color: #ffe0b2;
}

.operator:active {
	background-color: #ff9800;
}

.calculator-keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
}

.all-clear {
	grid-row-start: 1;
	grid-column-start: 1;
	grid-column-end: 3;
}

.zero-button {
	grid-row-start: 5;
	grid-column-start: 1;
	grid-column-end: 4;
}