* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

header {
	margin-block: 3rem;
	text-align: center;
}

.controls {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-block-end: 3rem;
}

#play-btn {
	width: 100px;
	background-color: teal;
	font-size: 14px;
	font-weight: 700;
	color: blanchedalmond;
	border: none;
	border-radius: 15px;
	padding-block: 8px;
}

.drummachine {
	display: grid;
	gap: 24px;
	grid-template-columns: [mixer-start] 15vw [mixer-end] auto [sequencer-end];
	padding-inline: 15%;
}

.indicator {
	grid-column: mixer-end / sequencer-end;
}

.idctr {
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background-color: gray;
}

.idctr.on {
	background-color: red;
}

label {
	display: flex;
}

.mixer {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.sequencer {
	width: 100%;
	max-width: 1024px;
	/* padding-inline-start: 15%; */
	margin: 0 auto;
}

.sequencer :last-child {
	margin-block-end: 0;
}

ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 48px;
}

li {
	list-style-type: none;
}

.beat {
	width: 24px;
	height: 24px;
}

.on {
	background-color: aqua;
}

.off {
	background-color: darkslategray;
}