:root{--color-electric-indigo: hsl(252, 100%, 65%);--color-electric-green: hsl(128, 100%, 87%);--color-dark-green: hsl(181, 75%, 37%);--color-dark-blue: hsl(199, 84%, 19%);--color-highlight-primary: hsl(252, 100%, 65%);--color-highlight-secondary: hsl(128, 100%, 87%);--color-highlight-tertiary: hsl(181, 75%, 37%);--color-text-on-highlight-primary: #ffffff;--color-text-on-highlight-secondary: hsl(199, 84%, 19%);--color-text-on-highlight-tertiary: #ffffff;--color-dark: hsl(199, 84%, 19%);--color-light: #ffffff;--color-gray: hsl(203, 20%, 76%);--color-focus: hsl(252, 100%, 65%);--color-white: #ffffff;--color-body: hsl(199, 84%, 19%);--color-gray-25: hsla(203, 20%, 97%, 1);--color-gray-50: hsla(203, 20%, 93%, 1);--color-gray-100: hsla(202, 20%, 88%, 1);--color-gray-200: hsla(202, 20%, 84%, 1);--color-gray-300: hsla(202, 20%, 80%, 1);--color-gray-400: hsla(203, 20%, 76%, 1);--color-gray-500: hsla(203, 20%, 67%, 1);--color-gray-600: hsla(203, 18%, 58%, 1);--color-gray-700: hsla(203, 17%, 48%, 1);--color-gray-800: hsla(203, 19%, 36%, 1);--color-gray-900: hsla(203, 20%, 26%, 1);--color-gray-950: hsla(203, 20%, 17%, 1)}:root,.theme-white{--color-highlight: var(--color-electric-indigo);--color-text-on-highlight: var(--color-white);--color-text: var(--color-body);--color-muted: color-mix(in hsl, var(--color-text), transparent 33%);--color-border: color-mix(in hsl, var(--color-text), transparent 80%);--background: var(--color-white);--background-contrast: var(--color-gray-50)}.theme-gray{--color-highlight: var(--color-electric-indigo);--color-text-on-highlight: var(--color-white);--color-text: var(--color-body);--color-muted: color-mix(in hsl, var(--color-text), transparent 33%);--color-border: color-mix(in hsl, var(--color-text), transparent 80%);--background: var(--color-gray-50);--background-contrast: var(--color-white)}.theme-dark,.theme-dark-blue{--color-highlight: var(--color-electric-green);--color-text-on-highlight: var(--color-body);--color-text: var(--color-white);--color-muted: color-mix(in hsl, var(--color-text), transparent 33%);--color-border: color-mix(in hsl, var(--color-text), transparent 80%);--background: var(--color-dark-blue);--background-contrast: var(--color-white);--color-focus: var(--color-electric-green)}.theme-primary,.theme-electric-green{--color-highlight: var(--color-white);--color-text-on-highlight: var(--color-dark-blue);--color-text: var(--color-dark-blue);--color-muted: color-mix(in hsl, var(--color-text), transparent 33%);--color-border: color-mix(in hsl, var(--color-text), transparent 80%);--background: var(--color-electric-green);--background-contrast: var(--color-dark-blue)}.theme-dark-gray{--color-highlight: var(--color-electric-green);--color-text-on-highlight: var(--color-dark-blue);--color-text: var(--color-dark-blue);--color-muted: color-mix(in hsl, var(--color-text), transparent 33%);--color-border: color-mix(in hsl, var(--color-text), transparent 80%);--background: var(--color-gray-200);--background-contrast: var(--color-white)}.body-theme-gray{--body-background: var(--color-gray-50);background-color:var(--body-background)}.body-theme-gray .header:not(.theme-gray)+.main{background-color:var(--color-gray-50)}.body-theme-gray .main>.theme-gray:first-child{background-color:transparent}.body-theme-white,.body-theme-default{--body-background: var(--color-white);background-color:var(--body-background)}.body-theme-white .header:not(.theme-default,.theme-white)+.main,.body-theme-default .header:not(.theme-default,.theme-white)+.main{background-color:var(--color-white)}.body-theme-white .main>.section.theme-default:first-child,.body-theme-white .main>.section.theme-white:first-child,.body-theme-default .main>.section.theme-default:first-child,.body-theme-default .main>.section.theme-white:first-child{background-color:transparent}.body-theme-dark-blue{--body-background: var(--color-dark-blue);background-color:var(--body-background)}.theme-white .btn-primary,[class*=theme-] .theme-white .btn-primary{--button-color: var(--color-electric-green);--button-background: var(--color-dark-blue);--button-hover-color: color-mix(in hsl, var(--color-electric-green), white 10%);--button-hover-background: color-mix(in hsl, var(--button-background), white 10%);--button-pressed-color: color-mix(in hsl, var(--color-electric-green), black 10%);--button-pressed-background: color-mix(in hsl, var(--button-background), black 20%)}.theme-white .btn-secondary,[class*=theme-] .theme-white .btn-secondary{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: var(--color-gray-50);--button-pressed-color: var(--color-text);--button-pressed-background: var(--color-gray-100)}.theme-white .btn-ui,[class*=theme-] .theme-white .btn-ui{--button-color: var(--color-text);--button-background: var(--color-gray-50);--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), var(--color-text) 20%);--button-pressed-color: var(--color-text);--button-pressed-background: var(--color-gray-200)}.theme-white .btn-ghost,[class*=theme-] .theme-white .btn-ghost{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), var(--color-text) 10%);--button-pressed-color: var(--color-text);--button-pressed-background: color-mix(in hsl, var(--button-background), var(--color-text) 20%)}.theme-gray .btn-primary,[class*=theme-] .theme-gray .btn-primary{--button-color: var(--color-electric-green);--button-background: var(--color-dark-blue);--button-hover-color: var(--color-white);--button-hover-background: var(--color-electric-indigo);--button-pressed-color: var(--color-white);--button-pressed-background: color-mix(in hsl, var(--color-electric-indigo), black 10%);--button-active-color: var(--color-white);--button-active-background: color-mix(in hsl, var(--color-electric-indigo), black 20%)}.theme-gray .btn-secondary,[class*=theme-] .theme-gray .btn-secondary{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: var(--color-gray-50);--button-pressed-color: var(--color-text);--button-pressed-background: var(--color-gray-100)}.theme-gray .btn-ui,[class*=theme-] .theme-gray .btn-ui{--button-color: var(--color-text);--button-background: var(--color-white);--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), var(--color-text) 20%);--button-pressed-color: var(--color-text);--button-pressed-background: var(--color-gray-200)}.theme-gray .btn-ghost,[class*=theme-] .theme-gray .btn-ghost{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), var(--color-text) 10%);--button-pressed-color: var(--color-text);--button-pressed-background: color-mix(in hsl, var(--button-background), var(--color-text) 20%)}.theme-dark .btn-primary,[class*=theme-] .theme-dark .btn-primary,.theme-dark-blue .btn-primary,[class*=theme-] .theme-dark-blue .btn-primary{--button-color: var(--color-dark-blue);--button-background: var(--color-electric-green);--button-hover-color: color-mix(in hsl, var(--color-dark-blue), white 10%);--button-hover-background: color-mix(in hsl, var(--color-electric-green), white 10%);--button-pressed-color: color-mix(in hsl, var(--color-dark-blue), black 10%);--button-pressed-background: color-mix(in hsl, var(--color-electric-green), black 20%)}.theme-dark .btn-secondary,[class*=theme-] .theme-dark .btn-secondary,.theme-dark-blue .btn-secondary,[class*=theme-] .theme-dark-blue .btn-secondary{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), white 10%);--button-pressed-color: var(--color-text);--button-pressed-background: color-mix(in hsl, var(--button-background), black 10%);--button-border-color: var(--color-text);--button-border-width: 1.5px}.theme-dark .btn-ui,[class*=theme-] .theme-dark .btn-ui,.theme-dark-blue .btn-ui,[class*=theme-] .theme-dark-blue .btn-ui{--button-color: var(--background);--button-background: color-mix(in hsl, var(--color-text), transparent 25%);--button-hover-color: var(--background);--button-hover-background: color-mix(in hsl, var(--button-background), white 20%);--button-pressed-color: var(--background);--button-pressed-background: color-mix(in hsl, var(--button-background), black 20%)}.theme-dark .btn-ghost,[class*=theme-] .theme-dark .btn-ghost,.theme-dark-blue .btn-ghost,[class*=theme-] .theme-dark-blue .btn-ghost{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), white 10%);--button-pressed-color: var(--color-text);--button-pressed-background: color-mix(in hsl, var(--button-background), black 20%)}.theme-primary .btn-primary,[class*=theme-] .theme-primary .btn-primary,.theme-electric-green .btn-primary,[class*=theme-] .theme-electric-green .btn-primary{--button-color: var(--color-electric-green);--button-background: var(--color-dark-blue);--button-hover-color: color-mix(in hsl, var(--color-electric-green), white 10%);--button-hover-background: color-mix(in hsl, var(--button-background), white 10%);--button-pressed-color: color-mix(in hsl, var(--color-electric-green), black 10%);--button-pressed-background: color-mix(in hsl, var(--button-background), black 20%)}.theme-primary .btn-secondary,[class*=theme-] .theme-primary .btn-secondary,.theme-electric-green .btn-secondary,[class*=theme-] .theme-electric-green .btn-secondary{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: var(--color-gray-25);--button-pressed-color: var(--color-text);--button-pressed-background: var(--color-gray-50);--button-border-color: var(--color-text);--button-border-width: 1.5px}.theme-primary .btn-ghost,[class*=theme-] .theme-primary .btn-ghost,.theme-electric-green .btn-ghost,[class*=theme-] .theme-electric-green .btn-ghost{--button-color: var(--color-text);--button-background: transparent;--button-hover-color: var(--color-text);--button-hover-background: color-mix(in hsl, var(--button-background), var(--color-text) 10%);--button-pressed-color: var(--color-text);--button-pressed-background: color-mix(in hsl, var(--button-background), var(--color-text) 20%)}