:root {
  /* Gigso Brand Colors */
  --gigso-navy: #08113e;
  --gigso-turquoise: #0DC9BB;
  --gigso-cream: #F9E6C3;
  --gigso-sun: #FFE448;
  --gigso-orange: #F67E07;
  --gigso-red: #F14424;
  --gigso-fuschia: #E15280;

  --colour-primary: #0DC9BB;
  --chord-button-border-color: #08113e;
  --chord-button-active-color: #FFE448;
  --chord-button-hover-color: #F9E6C3;

  --colour-red: #F14424;
  --colour-orange: #F67E07;
  --colour-yellow: #FFE448;
  --colour-green: #60B05B;
  --colour-blue: #0DC9BB;
  --colour-indigo: #08113e;
  --colour-violet: #E15280;

  --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;
  /* 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;
}

gigso-menu {
  display: inline-block;
}

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

gigso-keyboard {
  grid-column: 2;
  grid-row: 3;
}

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


piano-roll {
  display: block;
  width: 100%;
}

/* Demo page status styles */
.status {
  padding: 10px 15px;
  border-radius: 5px;
  margin: 10px 0;
  font-weight: 500;
}

.status.info {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  color: #1976d2;
}

.status.success {
  background: #e8f5e8;
  border: 1px solid #4caf50;
  color: #2e7d32;
}

.status.warning {
  background: #fff3e0;
  border: 1px solid #ff9800;
  color: #f57c00;
}

.status.error {
  background: #ffebee;
  border: 1px solid #f44336;
  color: #d32f2f;
}