:root {
	--body-background-color: #0f0f0f;
}

@font-face {
	font-family: SF-Pro;
	src: url(fonts/SF-Pro.ttf);
}

@font-face {
	font-family: SF-Pro-Light;
	src: url(fonts/SF-Pro-Text-Light.otf) format("opentype");
}

body {
	font-family: SF-Pro;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	background-color: var(--body-background-color);
	height: 98vh;
}

.heading {
	font-size: 50px;
	color: white;
	padding-top: 30px;
}

.calculator {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-template-areas:
		"output output output output"
		"clear plus-minus percent divide"
		"seven eight nine multiply"
		"four five six subtract"
		"one two three add"
		"zero zero point equals";
	row-gap: 10px;
	column-gap: 10px;
	width: 320px;
	height: 560px;
	padding: 20px;
	border: 5px solid rgb(194, 189, 189);
	border-radius: 50px;
}

/* .calculator > button, */
.calculator > * {
	display: grid;
	place-items: center;
	border: none;
	border-radius: 45px;
	font-family: SF-Pro;
	font-size: 2em;
	font-weight: 550;
	background-color: rgb(53, 53, 53);
	color: whitesmoke;
}

.output {
	display: flex;
	justify-content: flex-end;
	font-family: SF-Pro-Light;
	font-size: 4em;
	font-weight: 100;
	padding: 80px 10px 0px 10px;
	height: 80px;
	background-color: var(--body-background-color);
}

.zero {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 0.9em;
}

.operator,
.equals {
	background-color: orange;
}

.operator:focus {
	transition: 0.5s;
	background-color: white;
	color: orange;
}

button.top {
	background-color: grey;
	color: black;
}

footer a {
	display: flex;
    justify-content: center;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	color: whitesmoke
}

footer img {
	filter: invert(100%);
	height: 40px;
}

.output {
	grid-area: output;
}
.zero {
	grid-area: zero;
}
.one {
	grid-area: one;
}
.two {
	grid-area: two;
}
.three {
	grid-area: three;
}
.four {
	grid-area: four;
}
.five {
	grid-area: five;
}
.six {
	grid-area: six;
}
.seven {
	grid-area: seven;
}
.eight {
	grid-area: eight;
}
.nine {
	grid-area: nine;
}
.add {
	grid-area: add;
}
.subtract {
	grid-area: subtract;
}
.multiply {
	grid-area: multiply;
}
.divide {
	grid-area: divide;
}
.equals {
	grid-area: equals;
}
.point {
	grid-area: point;
}
.clear {
	grid-area: clear;
}
.plus-minus {
	grid-area: plus-minus;
}
.percent {
	grid-area: percent;
}
