html[data-theme='crayola'] {
  --primary: #7fd8e7;
  --background: #191d2e;
  --background-darker: #070912;
  --font-headings: 'Sniglet', cursive;
  --curve-factor: 8px;
  --nav-link-border-color-hover: transparent;
  .collapsable, .nav a.nav-item {
    &:nth-child(1n) { --index-color: #9b5de5; }
    &:nth-child(2n) { --index-color: #f15bb5; }
    &:nth-child(3n) { --index-color: #fee440; }
    &:nth-child(4n) { --index-color: #00bbf9; }
    &:nth-child(5n) { --index-color: #00f5d4; }
    --item-group-outer-background: var(--index-color);
    --item-text-color: var(--index-color);
    --widget-text-color: var(--index-color);
    --primary: var(--index-color);
    --item-group-shadow: inset 0 2px 1px var(--index-color), 1px 1px 2px #000000cc;
    --item-hover-shadow: 0 0 2px var(--index-color);
    --item-text-color-hover: var(--index-color);
    --nav-link-text-color-hover: var(--index-color);
    --nav-link-shadow-hover: inset 0 2px 1px var(--index-color), 1px 1px 2px #000000cc;
    .item:hover { background: var(--index-color); color: var(--background); }
  }
}

