/* Background Image */
body {
	background-image: url("../images/wood.jpg");
	background-color: black;
	padding: 10px 0px;
}

/* Added Fonts */
@font-face {
	src: url(/fonts/digital-7.ttf);
	font-family: "digital-7";
}
@font-face {
	src: url(/fonts/NegativeSpace.ttf);
	font-family: "negativeSpace";
}

/* Calculator Display + History */
.display {
	font-family: "digital-7";
	text-align: right;
	font-size: 5em;
	max-width: 315px;
	height: 80px;
	background-color: white;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 0px 20px 5px 20px;
	overflow: hidden;
	word-wrap: break-word;
}
.history {
	font-family: "digital-7";
	text-align: right;
	font-size: 1.4em;
	max-width: 315px;
	height: 20px;
	background-color: white;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 10px 20px 20px 20px;
	overflow: hidden;
}
.displayBorder {
	 border: 10px solid rgba(0,0,0,0.15);
	 max-width: 315px;
	 border-radius: 30px;
	 margin-bottom: 20px;	
	 box-shadow:
	 inset 0 1px 0 rgba(255,255,255,0.5),
	 0 2px 2px rgba(0,0,0,0.3),
	 0 0 4px 1px rgba(0,0,0,0.8);
}

/* Calculator Logo & Name */
.name {
	font-family: "negativeSpace";
	text-align: left;
	width: 200px;
	color: #C27457;
	opacity: 0.9;
	font-size: 2.2em;
}

/* Buttons */
button {
  display: inline-block;
  margin: 5px;
  padding: 8px 15px;
  font-size: 1.5em;
  height: 70px;
  width: 70px;
  color: #C27457;
  background-image: url("../images/wood.jpg");
  border: 10px solid rgba(0,0,0,0.15);/* controls opacity of button border */
  border-radius: 20px;
  transition: all 0.1s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.8);

button {
  box-shadow: 
    inset 0 3px 2px rgba(255,255,255,.1), 
    inset 0 -3px 2px rgba(0,0,0,.17), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
}

/* Calculator Logo & Name */
.name {
	font-family: "negativeSpace";
	text-align: left;
	width: 200px;
	color: white;
	opacity: 0.2;
	font-size: 2em;
	padding-bottom: 0px;
}
