calculator.css

body {
	background-color: #F2F2F2;
}

#calculator {
	position: absolute;
	width: 20em;
	height: 28em;
	background-color: #1A1A1A;
}

#screen {
	height: 10em;
}

#screen div {
	width: 100%;
}

#answer {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0.5em 0;
	height: 1.5em;
	font-size: 2.5em;
	color: white;
}

#answer p {
	margin: 0 0.2em;
	float: right;
}

#expression {
	position: absolute;
	right: 0;
	margin: 0.5em 0;
	font-size: 1.5em;
	color: grey;
}

#expression textarea {
	width: 100%;
	height: 4.5em;
	resize: none;
	padding: 0 0.5em;
	background-color: #1A1A1A;
	border: none;
}

#expression textarea:focus {
	outline: none;
}

#calculator button {
	border: 1px solid #1A1A1A;
	border-radius: 0;
}

#calculator button:active {
	opacity: 0.5;
}

#calculator button:focus {
	outline: none;
}

.operator, .eraser, .number, #dot,  #ansSaver {
	height: 3.6em;
}

#equal {
	height: 7.2em;
}

.color2 {
	background-color: #252525;
	color: grey;
}

.color1 {
	background-color: #303030;
	color: grey;
}

.color3 {
	background-color: #AC92EC;
	color: #121212;
}

.bottom-group {
	padding: 0;
}

#erase img {
	height: 1.2em;
}

#credit a {
	color: #60449D;
}

@media screen and (max-height: 480px) {

	#calculator {
		width: 18em;
		height: 24em;
	}

	#screen {
		height: 8em;
	}

	.operator, .eraser, .number, #dot,  #ansSaver {
		height: 3.22em;
	}

	#equal {
		height: 6.44em;
	}

	#answer {
		font-size: 2.2em;
	}

}