:root {
  --colour-primary: #c6c6c6;
  --chord-button-border-color: #a6a6a6;
  --chord-button-active-color: #b6b6b6;
  --chord-button-hover-color: #d6d6d6;

  --colour-red: #E1453E;
  --colour-orange: #F17947;
  --colour-yellow: #FAB15C;
  --colour-green: #60B05B;
  --colour-blue: #5394C7;
  --colour-indigo: #4b0082;
  --colour-violet: #8F00FF;

  --colour-C: var(--colour-red);
  --colour-D: var(--colour-orange);
  --colour-E: var(--colour-yellow);
  --colour-F: var(--colour-green);
  --colour-G: var(--colour-blue);
  --colour-A: var(--colour-indigo);
  --colour-B: var(--colour-violet);

  /* Sharp/flat variants use the base note color with modifications applied via box-shadow */
  --colour-Cs: var(--colour-C);
  --colour-Db: var(--colour-D);
  --colour-Ds: var(--colour-D);
  --colour-Eb: var(--colour-E);
  --colour-Fs: var(--colour-F);
  --colour-Gb: var(--colour-G);
  --colour-Gs: var(--colour-G);
  --colour-Ab: var(--colour-A);
  --colour-As: var(--colour-A);
  --colour-Bb: var(--colour-B);
}

html {
  overflow-x: hidden;
}

body {
  background: url(./plastic.png) repeat;
  margin: 0;
}

#app {
  margin: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: 362px 1fr 1fr;
  /* grid-template-rows: 1fr 1fr; */
  height: 100vh;
}

gigso-logo {
  display: inline-block;
  width: 362px;
  height: 362px;
  grid-column: 1;
  grid-row: 1;
  grid-row-end: 4;
}

chord-palette {
  grid-column: 2 / 4;
  grid-row: 2;
}

gigso-keyboard {
  grid-column: 2 / 4;
  grid-row: 1;
}

instrument-select {
  grid-column: 1 / 2;
  grid-row: 5;
}

record-collection {
  grid-column: 1 / 2;
  grid-row: 4;
}

transport-controls {
  grid-column: 1;
  grid-row: 3;
  align-content: flex-end;
}

/* first column components */
chromatic-tuner {
  grid-column: 1;
}

vu-meter {
  grid-column: 2;
}

eq-display {
  grid-column: 3;
}

piano-roll {
  grid-row: 3;
}

transport-controls {
  grid-row: 2;
}

bpm-controller {
  grid-column: 1;
  grid-row: 3;
  padding: 20px 10px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  z-index: 10;
}

/* Full width components */
piano-roll,
fretboard-component,
frequency-monitor {
  display: block;
  width: 100%;
  grid-column: 1 / 4;
}

hand-pan {
  grid-row: 4 / 6;
  grid-column: 2 / 3;
}

gigso-mixer {
  grid-row: 4 / 6;
  grid-column: 3 / 4;
  align-self: start;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}