@charset "utf-8";


/* This is the calculator's frame. */
.calculatorContainer{
	margin: 10px auto 0px auto;
	padding: 10px 0px 20px 0px;
	width: 300px;
	overflow: hidden;
	text-align: center;
	border: 3px solid #696969;
	border-radius: 15px;
	background-color: #d3d3d3;
	background-image: linear-gradient(135deg, #a9a9a9, #d3d3d3, #a9a9a9);
	font-family: Arial, Helvetica, sans-serif;
}



/* This is the calculator's display screen. */
#displayContainer{
	margin: 10px auto;
	text-align: right;
	height: 30px;
	width: 240px;
	padding: 4px 8px;
	font-size: 24px;
	background-color: #ffffff;
	color: #696969;
	border-top: 4px solid #696969;
	border-right: 4px solid #696969;
	border-bottom: 2px solid #696969;
	border-left: 2px solid #696969;
	white-space: nowrap;
	overflow: hidden;
}


/* This is a button on the calculator. The mathematic symbols must be passed as a plain string, and not as "this.innerHTML". That won't work. */
.standardButton{
	display: inline-block;
	margin: 8px;
	padding: 4px;
	width: 40px;
	height: 40px;	
	box-shadow: -2px 3px 0px #696969;
	border: 1px solid #696969;
	border-radius: 10px;
	color: #696969;
	background-color: #f5f5f5;
	font-size: 36px;
	cursor: pointer;

}

.standardButton:hover{
	color: #000000;
}




/* When a button is clicked, this animation moves it down and to the left two pixels to simulate a button press. */
.standardButton:active{
	box-shadow: 0px 0px 0px #696969;
	position: relative;
	animation: clickDown 0.2s;
}
@keyframes clickDown{
	from{
		top: 0px;
		left: 0;
	}
	to{
		top: 2px;
		left: -2px;
	}
}