:root {
  /* --bg-0: #c00;
  --bg-1: #c60;
  --bg-2: #cc0;
  --bg-3: #2c0;
  --bg-4: #0aa; */
  --bg-0: hsl(228, 11%, 9%);
  --bg-1: hsl(227, 11%, 11%);
  --bg-2: hsl(226, 11%, 13%);
  --bg-3: hsl(225, 11%, 16%);
  --bg-4: hsl(224, 11%, 21%);

  /* --bg-0: hsl(220, 14%, 9%);
  --bg-1: hsl(228, 8%, 12%);
  --bg-2: hsl(225, 11%, 14%);
  --bg-3: hsl(220, 7%, 16%);
  --bg-4: hsl(216, 9%, 22%); */
  /* --bg-2: #25272e;
  --bg-3: #31333b; */

  --text-0: #e6dfdf;
  --text-1: #b8afaf;
  --text-2: #948484;

  --accent: #2ea295;
}

@font-face {
  font-family: 'AI';
  src: url('fonts/loaded.ttf') format('truetype');
}

.AI {
  font-family: 'AI', sans-serif;
  font-weight: bolder;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  background-color: var(--bg-0);
  color: var(--text-0);
}

body {
  display: flex;
  flex-direction: row;
}

#sidebar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--bg-1);
  width: 40vw;
  height: 100%;
}

#dictionary {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  
  background-color: var(--bg-2);

  margin: 12px;
  padding: 8px;
  border-radius: 12px;

  height: 80%;
}

#display, #plot-container {
  flex: 1;
  display: flex;
}

#plot-container {
  align-items: center;
}

#plot-container canvas {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}