/* Dark theme */
:root {
  --primary-color: #6a5acd;
  --primary-color-opacity: 106, 90, 205;
  --secondary-color: #47478f;
  --tertiary-color: #8585ff;
  --complementary-color: #bdcd5a;
  --background-color: #0a0b0c;
  --container-color: hsl(250, 4%, 11%);
  --container-color-hover: hsl(250, 4%, 12.5%);
  --container-alt-color: hsl(250, 4%, 11.5%);
  --inner-container-color: hsl(250, 4%, 14%);
  --inner-container-color-opacity: 35, 35, 37;
  --inner-container-alt-color: hsl(250, 4%, 18%);
  --text-color: #e6e6e6;
  --divider-color: rgba(var(--primary-color-opacity), 0.4); /*#535353;*/
  --divider-alt-color: #303030;
  --dropshadow: 2px 2px 5px rgba(var(--primary-color-opacity), 40%);
  --dropshadow-glow: 0 0 50px rgba(var(--primary-color-opacity), 60%);
  --dropshadow-glow-alt: 0 0 50px rgba(var(--primary-color-opacity), 60%);
  --invertion-filter: invert(0);
  --theme-opacity-compensation: 1;
}

/* Light theme */
[data-theme="light"] {
  --primary-color: #8585ff;
  --primary-color-opacity: 133, 133, 255;
  --secondary-color: #4a3f90;
  --tertiary-color: #6a5acd;
  --complementary-color: #bdcd5a;
  --background-color: #ffffff;
  --container-color: hsl(250, 21%, 94%);
  --container-color-hover: hsl(250, 21%, 90%);
  --container-alt-color: hsl(250, 21%, 92%);
  --inner-container-color: hsl(250, 21%, 88%);
  --inner-container-color-opacity: 220, 218, 231;
  --inner-container-alt-color: hsl(240, 100%, 92%);
  --text-color: #333333;
  --divider-color: rgba(var(--primary-color-opacity), 0.4); /*#bbbbbb;*/
  --divider-alt-color: #dddddd;
  --dropshadow: 2px 2px 5px rgba(var(--primary-color-opacity), 60%);
  --dropshadow-glow: 0 0 50px rgba(var(--primary-color-opacity), 100%);
  --dropshadow-glow-alt: 0 0 50px rgba(var(--primary-color-opacity), 30%);
  --invertion-filter: invert(80%);
  --theme-opacity-compensation: 1.1;
}