:root {
	--color-green: hsl(75, 70%, 60%);
	/* --color-brown: rgb(227, 117, 7); */
	--color-brown: rgb(235, 98, 49);
	--color-beige: hsl(30,20%,80%);
	--color-ciel: #abc;
}

* {
	margin: 0;
	color: inherit;
	font: inherit;
	text-shadow: inherit;
}

body {
	background: var(--color-brown) url(../img/noise.png);
	color: white;
	-webkit-font-smoothing: antialiased; /* fix for WebKit inconsistency */
	tab-size: 4;
}

code, pre {
	font-family: Consolas, Monaco, monospace;
}

button,
.button {
	padding: .2em .5em;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: .3em;
	background: hsl(75, 70%, 60%);
	background-image: url(../img/noise.png),
			linear-gradient(hsla(75, 70%, 60%, 0), hsl(75, 70%, 35%));
	background-origin: border-box;
	box-shadow: 0 1px white inset, 0 .2em .25em -.1em rgba(0,0,0,.5);
	transition-property: box-shadow, background, border-width;
	transition-duration: .3s;
	text-shadow: 0 -0.05em 0.1em rgba(0,0,0,.3);
	color: white;
}

button:hover,
.button:hover {
	background-color: hsl(75, 80%, 75%);
}

button:active,
.button:active {
	border: 0;
	background-color: hsl(75, 70%, 40%);
	box-shadow: 0 1px hsla(0,0%,100%,.3), 0 1px .3em .05em black inset;
}

a {
	text-decoration: none;
	color: inherit;
}

em {
	font-style: italic;
}