app.css

body{
	text-align: left;
	font-size: 19px;
	font-family:arial;
	letter-spacing: 1px;
	line-height: 27px;
	margin:0;
    background-image: linear-gradient(red,blue);
}

a{
	text-decoration:none;
}

#calculator-wrapper{
	position:absolute;
	width: 300px;
	height: 400px;
	top:calc(50vh - 200px);
	left:calc(50vw - 150px);
	border:1px solid #000;
	background-color:#f3f3f3;
}

#display-wrapper{
	text-align:right;
	padding:9px;
}

#display{
	font-size:44px;
	margin-top:10px;
}

#clear {grid-area:clear;}
#divide {grid-area:divide;}
#multiply {grid-area:multiply;}
#subtract {grid-area:subtract;}
#add {grid-area:add;}
#equals {grid-area:equals;}
#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;}
#decimal {grid-area:decimal;}


#button-wrapper{
	display: grid;
	grid-template-areas:
		'clear divide multiply subtract'
		'seven eight nine add'
		'four five six add'
		'one two three equals'
		'zero zero decimal equals';
	height:300px;
	margin-top:17px;
	border-top:1px solid #000;
}

#button-wrapper > div{
	border:1px solid;
	padding: 15px 0;
	text-align: center;
	font-size: 28px;
	cursor: pointer;
	transition:.4s;
}

#button-wrapper > div:hover{
	background-color:#dbdbdb;
}