body {
	margin: 5% auto;
	background-color: #eee;
	color: #333;
}

h1 {
	font-family: monospace;
	text-align: center;
	font-size: 40px ;
	text-shadow: 2px 2px grey;
}

input, label {
	font-size: 44px;
	padding: 20px;
	font-family: courier;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 4px solid rgba(238,238,238,.15);
	display: block;
	margin: 50px auto;
	width: 80%;
	background: #f5f5f5;
	overflow: hidden;
	text-overflow: ellipsis;

	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	
	text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
	-moz-text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
	-webkit-text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
}

#hex:focus {
	outline: 0;

	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.article {
	padding: 3% 10% 0;
}