body {
	background: #323232;
}

.App {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
}

.controls {
	margin-bottom: 20px;
	width: 456px;
}

button {
	background: dimgrey;
	color: silver;
	border-radius: 3px;
	border: none;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 7px 14px;	
	float: left;
	outline: none;
	cursor: pointer;
}

.bpm {
	float: right;
	color: silver;
	font-weight: bold;
}

.bpm label {
	margin: 3px 5px 0 0;
	float: left;
}

.bpm input {
	float: left;
}

.bpm output {
	float: left;
	margin: 3px 0 0 5px;
}

.row {
	clear: both;
}

.pad {
	width: 50px;
	height: 50px;
	float: left;
	margin: 0 7px 7px 0;
	cursor: pointer;
	background: grey;
	border-radius: 3px;
}

.pad:hover {
	background: silver;
}

.pad.active {
	background: green;
}

.pad.playing {
	background: gainsboro;
	box-shadow: 0px 0px 20px 3px rgba(255, 255, 210, .70);
}

.pad.active.playing, .pad.active:hover {
	background: lime;
}

p.link a {
	color: silver;
}