*
{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body
{
	display:flex;
	justify-content:center;
	align-items: center;
	min-height:100vh;
	background: #091921;
	background-size:cover;
	background-repeat:no-repeat;
	background-blend-mode: hard-light;
	flex-direction: column;
}
body::before
{
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: url(res/img2.jpg);
	background-size:cover;
	filter: grayscale(100%);
}
body::after
{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.5);
}
.heading
{
	z-index: 2;
}
.heading h1
{
	color:#fff;
	font-size: 40px;
	letter-spacing: 2px;
	padding-bottom:5px;
}
.calculator
{
	position:relative;
	display:grid;
	z-index:2;
	filter:blur(0);
	margin-bottom: 15px;
	background:#1a4a66;
	padding:0;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 5px 5px rgba(0,0,0,0.5);
	box-sizing:border-box;
}
.calculator .value
{
	grid-column: span 4;
	height:100px;
	text-align:right;
	border:none;
	outline: none;
	padding:10px;
	font-size:18px;
}
.calculator span
{
	display:grid;
	height: 80px;
	width:80px;
	color:#fff;
	background:#1a4a66;
	place-items:center;
	border: 1px solid rgba(0,0,0,0.1);				/*border can be transparent*/;
	border-radius: 8px;
}
.calculator span:active
{
	background: #74ff3b;
	color:#111;
}
.calculator span.all-clear
{
	background:#fa3b7d;
}
.calculator span.plus
{
	grid-row: span 2;
	height:160px;
}
.calculator span.equal
{
	background: #03b1ff;
}
footer
{
	z-index: 2;
	color:white;
	position:absolute;
	bottom:40px;
}
@media(max-width:768px)
{
	.calculator
	{
		min-width:240px;
	}
	.calculator span
	{
		height: 60px;
		width:60px;
		background:#1a4a66;
		grid-gap:0;
	}
	.calculator span.clear-all
	{
		background:#ff3077;
	}
	.calculator span.plus
	{
		grid-row: span 2;
		height:120px;
	}
}