body {
  background: #222;
  display: flex;
  justify-content: center;
  align-content: center; }

.grid {
  padding: 20px;
  overflow: hidden;
  width: 800px;
  height: 40em;
  background-color: #333;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap; }
  .grid button {
    background: transparent;
    border: 4px solid #fff;
    padding: 0;
    margin: 0;
    height: 1em;
    box-sizing: border-box;
    flex: 1 1 5.25%;
    margin: 1em .5% 5px;
    position: relative;
    outline: none; }
    .grid button:hover {
      background: rgba(255, 255, 255, 0.2); }
    .grid button.on {
      background: #fff; }
      .grid button.on:hover {
        background: rgba(255, 255, 255, 0.8); }
    .grid button.first::before {
      content: attr(data-instrument);
      position: absolute;
      left: 0;
      top: -1.5em;
      color: #fff;
      text-align: left; }
    .grid button.ticked {
      background: lightgreen; }
      .grid button.ticked:hover {
        background: rgba(144, 238, 144, 0.8); }

.controls {
  padding: 20px;
  display: flex;
  flex-direction: column; }
  .controls button {
    background: #fff;
    text-transform: uppercase;
    border: 0;
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    flex: 0 1 100px;
    margin-bottom: 20px; }