#app {
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* text-align: center; */

  --chalky-dark: #e5c07b;
  --coral-dark: #e06c75;
  --cyan-dark: #56b6c2;
  --invalid-dark: #ffffff;
  --ivory-dark: #abb2bf;
  --stone-dark: #7d8799;
  --malibu-dark: #61afef;
  --sage-dark: #98c379;
  --whiskey-dark: #d19a66;
  --violet-dark: #a262b6;

  --chalky-light: #c4a46b;
  --coral-light: #bb5a62;
  --cyan-light: #397c85;
  --invalid-light: #000000;
  --ivory-light: #51545a;
  --stone-light: #3d434b;
  --malibu-light: #4883b3;
  --sage-light: #6e8d58;
  --whiskey-light: #976f49;
  --violet-light: #c275da;

  --chalky: var(--chalky-light);
  --coral: var(--coral-light);
  --cyan: var(--cyan-light);
  --invalid: var(--invalid-light);
  --ivory: var(--ivory-light);
  --stone: var(--stone-light);
  --malibu: var(--malibu-light);
  --sage: var(--sage-light);
  --whiskey: var(--whiskey-light);
  --violet: var(--violet-light);
}

#canvas-container {
  position: relative;
  height: 0;
  padding-bottom: 62.5%;
  overflow: hidden;
  background-color: grey;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.editor {
  border: 1px solid var(--fg-color);
}

.debug {
  padding: 1rem 0;
}