:root {
  --fallback-font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --primary-font-family: var(--fallback-font-family);
  --secondary-font-family: var(--fallback-font-family);
  --primary-brand-font-family: Oche-Capitals, var(--fallback-font-family);
  --primary-game-font-family: var(--fallback-font-family);
  --secondary-game-font-family: var(--fallback-font-family);
  --fallback-mono-font-family: monospace;
  --mono-font-family: var(--fallback-mono-font-family);
  --minimum-font-size: 12px;
  --maximum-font-size: 16px;
  --app-font-size: min(max(2vmin, var(--minimum-font-size, 12px)), var(--maximum-font-size, 16px));

  --transition-duration: 250ms;
  
  --lightness-black:         4%;
  --lightness-black-bis:     7%;
  --lightness-black-main:    11%;
  --lightness-black-ter:     14%;
  --lightness-grey-darkest:  18%;
  --lightness-grey-darker:   21%;
  --lightness-grey-dark:     29%;
  --lightness-grey:          48%;
  --lightness-grey-light:    71%;
  --lightness-grey-lighter:  86%;
  --lightness-grey-lightest: 93%;
  --lightness-white-ter:     96%;
  --lightness-white-main:    97%;
  --lightness-white-bis:     98%;
  --lightness-white:         100%;

  --yellow-hue: 38;
  --yellow-saturation: 100%;
  --yellow-lightness: 77%;
  --yellow-hsl: var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness);
  --yellow:       hsl(var(--yellow-hsl)); /* #ffd388 rgb(255, 211, 136) */
  --yellow-hover:       hsl(var(--yellow-hue), var(--yellow-saturation), max(calc(var(--yellow-lightness) - 7%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --yellow-active:      hsl(var(--yellow-hue), var(--yellow-saturation), max(calc(var(--yellow-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --yellow-darkest: hsl(var(--yellow-hue), 10%, var(--lightness-grey-darkest)); /* #322f29 */
  --yellow-dark: hsl(var(--yellow-hue), 10%, var(--lightness-grey-dark)); /* # */
  --yellow-lightest: hsl(var(--yellow-hue), var(--yellow-saturation), var(--lightness-grey-lightest)); /* # */
  --warning: var(--yellow);


  --green-hue: 151;
  --green-saturation: 68%;
  --green-lightness: 64%;
  --green-hsl: var(--green-hue), var(--green-saturation), var(--green-lightness);
  --green:        hsl(var(--green-hsl)); /* #64e1a5 rgb(100, 225, 165) */
  --green-hover: hsl(var(--green-hue), var(--green-saturation), max(calc(var(--green-lightness) - 7%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --green-active: hsl(var(--green-hue), var(--green-saturation), max(calc(var(--green-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --green-darkest: hsl(var(--green-hue), 10%, var(--lightness-grey-darkest)); /* #29322e */
  --green-dark: hsl(var(--green-hue), 10%, var(--lightness-grey-dark)); /* # */
  --green-lightest: hsl(var(--green-hue), var(--green-saturation), var(--lightness-grey-lightest)); /* # */
  --success: var(--green);

  --cyan-hue: 207;
  --cyan-saturation: 100%;
  --cyan-lightness: 63%;
  --cyan-hsl: var(--cyan-hue), var(--cyan-saturation), var(--cyan-lightness);
  --cyan:         hsl(var(--cyan-hsl)); /* #41aaff rgb(65, 170, 255) */
  --cyan-hover: hsl(var(--cyan-hue), var(--cyan-saturation), max(calc(var(--cyan-lightness) - 7%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --cyan-active: hsl(var(--cyan-hue), var(--cyan-saturation), max(calc(var(--cyan-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --cyan-darkest: hsl(var(--cyan-hue), 10%, var(--lightness-grey-darkest)); /* #292e32 */
  --cyan-dark: hsl(var(--cyan-hue), 10%, var(--lightness-grey-dark)); /* # */
  --cyan-lightest: hsl(var(--cyan-hue), var(--cyan-saturation), var(--lightness-grey-lightest)); /* # */
  --info: var(--cyan);

  --blue-hue: 225;
  --blue-saturation: 100%;
  --blue-lightness: 68%;
  --blue-hsl: var(--blue-hue), var(--blue-saturation), var(--blue-lightness);
  --blue:         hsl(var(--blue-hsl)); /* #5a82ff rgb(90, 130, 255) */
  --blue-hover: hsl(var(--blue-hue), var(--blue-saturation), max(calc(var(--blue-lightness) - 7%), 0%)); /* #386aff rgb(255, 211, 136) */
  --blue-active: hsl(var(--blue-hue), var(--blue-saturation), max(calc(var(--blue-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --blue-darkest: hsl(var(--blue-hue), 10%, var(--lightness-grey-darkest)); /* #292c32 */
  --blue-dark: hsl(var(--blue-hue), 10%, var(--lightness-grey-dark)); /* # */
  --blue-lightest: hsl(var(--blue-hue), var(--blue-saturation), var(--lightness-grey-lightest)); /* #dbe4ff */
  --link: var(--blue);

  --red-hue: 348;
  --red-saturation: 80%;
  --red-lightness: 65%;
  --red-hsl: var(--red-hue), var(--red-saturation), var(--red-lightness);
  --red: hsl(var(--red-hsl)); /* #ed5e7b rgb(237, 94, 123) */
  --red-hover: hsl(var(--red-hue), var(--red-saturation), max(calc(var(--red-lightness) - 7%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --red-active: hsl(var(--red-hue), var(--red-saturation), max(calc(var(--red-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --red-darkest: hsl(var(--red-hue), 10%, var(--lightness-grey-darkest)); /* #3b3030 */
  --red-dark: hsl(var(--red-hue), 10%, var(--lightness-grey-dark)); /* # */
  --red-lightest: hsl(var(--red-hue), var(--red-saturation), var(--lightness-grey-lightest)); /* # */
  --danger: var(--red);

  --primary-brand-color-hue: 175;
  --primary-brand-color-saturation: 41%;
  --primary-brand-color-lightness: 77%;
  --primary-brand-color-hsl: var(--primary-brand-color-hue), var(--primary-brand-color-saturation), var(--primary-brand-color-lightness);
  --primary-brand-color: hsl(var(--primary-brand-color-hsl)); /* #adddd9 rgb(173, 221, 217) */
  --primary-brand-color-hover: hsl(var(--primary-brand-color-hue), var(--primary-brand-color-saturation), max(calc(var(--primary-brand-color-lightness) - 7%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --primary-brand-color-active: hsl(var(--primary-brand-color-hue), var(--primary-brand-color-saturation), max(calc(var(--primary-brand-color-lightness) - 12%), 0%)); /* #ffd388 rgb(255, 211, 136) */
  --primary-brand-color-darkest: hsl(var(--primary-brand-color-hue), var(--primary-brand-color-saturation), var(--lightness-grey-darkest)); /* #1b413e */
  --primary-brand-color-dark: hsl(var(--primary-brand-color-hue), var(--primary-brand-color-saturation), var(--lightness-grey-dark)); /* # */
  --primary-brand-color-lightest: hsl(var(--primary-brand-color-hue), var(--primary-brand-color-saturation), var(--lightness-grey-lightest)); /* # */
  --secondary-brand-color-hue: 38;
  --secondary-brand-color-saturation: 100%;
  --secondary-brand-color-lightness: 77%;
  --secondary-brand-color-hsl: var(--secondary-brand-color-hue), var(--secondary-brand-color-saturation), var(--secondary-brand-color-lightness);
  --secondary-brand-color: hsl(var(--secondary-brand-color-hsl)); /* #301D30 rgb(48, 29, 48) not in use */

  --black-hsl: 0, 0%, var(--lightness-black);
  --black:        hsl(var(--black-hsl)); /* #0a0a0a */
  --black-bis-hsl: 0, 0%, var(--lightness-black-bis);
  --black-bis:    hsl(var(--black-bis-hsl)); /* #121212 */
  --black-main-hsl: 0, 0%, var(--lightness-black-main);
  --black-main:    hsl(var(--black-main-hsl)); /* #1c1c1c */
  --black-ter-hsl: 0, 0%, var(--lightness-black-ter);
  --black-ter:    hsl(var(--black-ter-hsl)); /* #242424 */

  --grey-darkest-hsl: 0, 0%, var(--lightness-grey-darkest);
  --grey-darkest:  hsl(var(--grey-darkest-hsl)); /* #2e2e2e */
  --grey-darker-hsl: 0, 0%, var(--lightness-grey-darker);
  --grey-darker:  hsl(var(--grey-darker-hsl)); /* #363636 */
  --grey-dark-hsl: 0, 0%, var(--lightness-grey-dark);
  --grey-dark:    hsl(var(--grey-dark-hsl)); /* #4a4a4a */
  --grey-hsl: 0, 0%, var(--lightness-grey);
  --grey:         hsl(var(--grey-hsl)); /* #7a7a7a */
  --grey-light-hsl: 0, 0%, var(--lightness-grey-light);
  --grey-light:   hsl(var(--grey-light-hsl)); /* #b5b5b5 */
  --grey-lighter-hsl: 0, 0%, var(--lightness-grey-lighter);
  --grey-lighter: hsl(var(--grey-lighter-hsl)); /* #dbdbdb */
  --grey-lightest-hsl: 0, 0%, var(--lightness-grey-lightest);
  --grey-lightest: hsl(var(--grey-lightest-hsl)); /* #ededed */

  --white-ter-hsl: 0, 0%, var(--lightness-white-ter);
  --white-ter:    hsl(var(--white-ter-hsl)); /* #f5f5f5 */
  --white-main-hsl: 0, 0%, var(--lightness-white-main);
  --white-main:    hsl(var(--white-main-hsl)); /* #f7f7f7 */
  --white-bis-hsl: 0, 0%, var(--lightness-white-bis);
  --white-bis:    hsl(var(--white-bis-hsl)); /* #fafafa */
  --white-hsl: 0, 0%, var(--lightness-white);
  --white:        hsl(var(--white-hsl)); /* #ffffff */

  --scheme-main-hue: 0;
  --scheme-main-saturation: 0%;
  --scheme-main-lightness: 11%;
  --scheme-main-hsl: var(--scheme-main-hue), var(--scheme-main-saturation), var(--scheme-main-lightness);
  --scheme-main: hsl(var(--scheme-main-hsl)); /* #1c1c1c */
  --scheme-main-dark: hsl(var(--scheme-main-hue), var(--scheme-main-saturation), max(calc(var(--scheme-main-lightness) - 2%), 0%));
  --scheme-invert-hue: 0;
  --scheme-invert-saturation: 0%;
  --scheme-invert-lightness: 100%;
  --scheme-invert-hsl: var(--scheme-invert-hue), var(--scheme-invert-saturation), var(--scheme-invert-lightness);
  --scheme-invert: hsl(var(--scheme-invert-hsl)); /* #ffffff */
  --scheme-main-bis-hue: var(--scheme-main-hue);
  --scheme-main-bis-saturation: var(--scheme-main-saturation);
  --scheme-main-bis-lightness: calc(var(--scheme-main-lightness) + 6%);
  --scheme-main-bis-hsl: var(--scheme-main-bis-hue), var(--scheme-main-bis-saturation), var(--scheme-main-bis-lightness);
  --scheme-main-bis: hsl(var(--scheme-main-bis-hsl)); /* #2b2b2b */
  --scheme-main-bis-dark: hsl(var(--scheme-main-bis-hue), var(--scheme-main-bis-saturation), max(calc(var(--scheme-main-bis-lightness) - 2%), 0%));
  --scheme-main-bis-light: hsl(var(--scheme-main-bis-hue), var(--scheme-main-bis-saturation), min(calc(var(--scheme-main-bis-lightness) + 10%), 100%));
  --scheme-invert-bis-hue: var(--scheme-invert-hue);
  --scheme-invert-bis-saturation: var(--scheme-invert-saturation);
  --scheme-invert-bis-lightness: calc(var(--scheme-invert-lightness) - 5%);
  --scheme-invert-bis-hsl: var(--scheme-invert-bis-hue), var(--scheme-invert-bis-saturation), var(--scheme-invert-bis-lightness);
  --scheme-invert-bis: hsl(var(--scheme-invert-bis-hsl)); /* #f2f2f2 */
  --scheme-main-ter-hue: var(--scheme-main-hue);
  --scheme-main-ter-saturation: var(--scheme-main-saturation);
  --scheme-main-ter-lightness: calc(var(--scheme-main-lightness) + 3%);
  --scheme-main-ter-hsl: var(--scheme-main-ter-hue), var(--scheme-main-ter-saturation), var(--scheme-main-ter-lightness);
  --scheme-main-ter: hsl(var(--scheme-main-ter-hsl)); /* #242424 */
  --scheme-invert-ter-hue: var(--scheme-invert-hue);
  --scheme-invert-ter-saturation: var(--scheme-invert-saturation);
  --scheme-invert-ter-lightness: calc(var(--scheme-invert-lightness) - 10%);
  --scheme-invert-ter-hsl: var(--scheme-invert-ter-hue), var(--scheme-invert-ter-saturation), var(--scheme-invert-ter-lightness);
  --scheme-invert-ter: hsl(var(--scheme-invert-ter-hsl)); /* #e6e6e6 */

  --text-hue: 0;
  --text-saturation: 0%;
  --text-lightness: var(--lightness-grey-lighter);
  --text-hsl: var(--text-hue), var(--text-saturation), var(--text-lightness);
  --text: hsl(var(--text-hsl)); /* #b5b5b5 */
  --text-light-hue: 0;
  --text-light-saturation: 0%;
  --text-light-lightness: var(--lightness-grey);
  --text-light-hsl: var(--text-light-hue), var(--text-light-saturation), var(--text-light-lightness);
  --text-light: hsl(var(--text-light-hsl)); /* #7a7a7a */
  --text-strong-hue: 0;
  --text-strong-saturation: 0%;
  --text-strong-lightness: var(--lightness-white-ter);
  --text-strong-hsl: var(--text-strong-hue), var(--text-strong-saturation), var(--text-strong-lightness);
  --text-strong: hsl(var(--text-strong-hsl)); /* #dbdbdb */
  --text-black-hue: 0;
  --text-black-saturation: 0%;
  --text-black-lightness: var(--lightness-black);
  --text-black-hsl: var(--text-black-hue), var(--text-black-saturation), var(--text-black-lightness);
  --text-black: hsl(var(--text-black-hsl)); /* #ffffff */
  --text-white-hue: 0;
  --text-white-saturation: 0%;
  --text-white-lightness: var(--lightness-white);
  --text-white-hsl: var(--text-white-hue), var(--text-white-saturation), var(--text-white-lightness);
  --text-white: hsl(var(--text-white-hsl)); /* #ffffff */

  --background-hue: var(--scheme-main-hue);
  --background-saturation: var(--scheme-main-saturation);
  --background-lightness: calc(var(--scheme-main-lightness) + 5%);
  --background-hsl: var(--background-hue), var(--background-saturation), var(--background-lightness);
  --background: hsl(var(--background-hsl)); /* #292929 */
  --border-hue: var(--scheme-main-hue);
  --border-saturation: var(--scheme-main-saturation);
  --border-lightness: var(--lightness-grey-dark);
  --border-hsl: var(--border-hue), var(--border-saturation), var(--border-lightness);
  --border: hsl(var(--border-hsl)); /* #4a4a4a */
  --border-hover-hue: var(--scheme-main-hue);
  --border-hover-saturation: var(--scheme-main-saturation);
  --border-hover-lightness: var(--lightness-grey);
  --border-hover-hsl: var(--border-hover-hue), var(--border-hover-saturation), var(--border-hover-lightness);
  --border-hover: hsl(var(--border-hover-hsl)); /* #7a7a7a */
  --border-light-hue: var(--scheme-main-hue);
  --border-light-saturation: var(--scheme-main-saturation);
  --border-light-lightness: var(--lightness-grey-darkest);
  --border-light-hsl: var(--border-light-hue), var(--border-light-saturation), var(--border-light-lightness);
  --border-light: hsl(var(--border-light-hsl)); /* #2e2e2e */

  --link-hover-hue: var(--scheme-main-hue);
  --link-hover-saturation: var(--scheme-main-saturation);
  --link-hover-lightness: var(--lightness-grey-lightest);
  --link-hover-hsl: var(--link-hover-hue), var(--link-hover-saturation), var(--link-hover-lightness);
  --link-hover: hsl(var(--link-hover-hsl)); /* #ededed */
  --link-hover-border-hue: var(--scheme-main-hue);
  --link-hover-border-saturation: var(--scheme-main-saturation);
  --link-hover-border-lightness: var(--lightness-grey);
  --link-hover-border-hsl: var(--link-hover-border-hue), var(--link-hover-border-saturation), var(--link-hover-border-lightness);
  --link-hover-border: hsl(var(--link-hover-border-hsl)); /* #7a7a7a */
  --link-focus-hue: var(--scheme-main-hue);
  --link-focus-saturation: var(--scheme-main-saturation);
  --link-focus-lightness: var(--lightness-grey-lightest);
  --link-focus-hsl: var(--link-focus-hue), var(--link-focus-saturation), var(--link-focus-lightness);
  --link-focus: hsl(var(--link-focus-hsl)); /* #ededed */
  --link-active-hue: var(--scheme-main-hue);
  --link-active-saturation: var(--scheme-main-saturation);
  --link-active-lightness: var(--lightness-grey-lightest);
  --link-active-hsl: var(--link-active-hue), var(--link-active-saturation), var(--link-active-lightness);
  --link-active: hsl(var(--link-active-hsl)); /* #ededed */
  --link-active-border-hue: var(--scheme-main-hue);
  --link-active-border-saturation: var(--scheme-main-saturation);
  --link-active-border-lightness: var(--lightness-grey-lightest);
  --link-active-border-hsl: var(--link-active-border-hue), var(--link-active-border-saturation), var(--link-active-border-lightness);
  --link-active-border: hsl(var(--link-active-border-hsl)); /* #ededed */

  --navbar-height: 3.5rem;
  --scroll-margin-top: calc(var(--navbar-height) + 1rem);
  --navbar-box-shadow-y: 2px; /* 8px for light theme*/
  --box-shadow-y: 0.125em; /* 0.5em for light theme*/

  --scrollbar-size: min(max(0.75vmin, 2px), 0.4rem);
  --scrollbar-background-color: transparent;
  --scrollbar-color: var(--primary-brand-color);
  --scrollbar-hover-color: var(--scheme-main-bis);
  --scrollbar-thumb-hover-color: var(--primary-brand-color-hover);
  
  --slider-background-color: var(--scheme-invert);
  --slider-thumb-background-color: var(--scheme-main-bis);
  --slider-thumb-color: var(--scheme-invert);
  --slider-thumb-color-hover: var(--scheme-invert);
  --slider-thumb-color-active: var(--scheme-invert);
  
  --side-panel-fullwidth: 18rem;
  --side-panel-minimized-width: 4rem;
  
  --button-scale-transform-delta: 0.025;
  --button-scale-transform-hover: calc(1 + var(--button-scale-transform-delta));
  --button-scale-transform-active: calc(1 - 2 * var(--button-scale-transform-delta));
  
  --border-radius-small: 0.125em;
  --border-radius-medium: 0.25em;
  --border-radius-large: 0.375em;
}

/*
Used to check system preferred theme
*/
@media (prefers-color-scheme: light) {
}
@media (prefers-color-scheme: dark) {
}

/*
Used to check whether we are in standalone mode or in a browser tab
*/
@media all and (display-mode: standalone) {
}