:root,
[data-theme="default"] {
  --color-topbar: hsl(210, 0%, 36%);
  --color-topbar-h: 210;
  --color-topbar-s: 0%;
  --color-topbar-l: 36%;
  --color-primary-darker: hsl(211, 0%, 16%);
  --color-primary-darker-h: 211;
  --color-primary-darker-s: 0%;
  --color-primary-darker-l: 16%;
  --color-primary-dark: hsl(210, 0%, 26%);
  --color-primary-dark-h: 210;
  --color-primary-dark-s: 0%;
  --color-primary-dark-l: 26%;
  --color-primary: hsl(210, 0%, 36%);
  --color-primary-h: 210;
  --color-primary-s: 0%;
  --color-primary-l: 36%;
  --color-primary-light: hsl(210, 0%, 43%);
  --color-primary-light-h: 210;
  --color-primary-light-s: 0%;
  --color-primary-light-l: 43%;
  --color-primary-lighter: hsl(210, 0%, 53%);
  --color-primary-lighter-h: 210;
  --color-primary-lighter-s: 0%;
  --color-primary-lighter-l: 53%;
  --color-badge: hsl(0, 57%, 36%);
  --color-badge-h: 0;
  --color-badge-s: 57%;
  --color-badge-l: 36%;
  --color-black: hsl(218, 0%, 7%);
  --color-black-h: 218;
  --color-black-s: 0%;
  --color-black-l: 7%;
  --color-white: hsl(0, 0%, 100%);
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-grey: hsl(0, 0%, 60%);
  --color-grey-h: 0;
  --color-grey-s: 0%;
  --color-grey-l: 60%;
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-h: 0;
  --color-bg-s: 0%;
  --color-bg-l: 100%;
  --color-contrast-lower: hsl(210, 0%, 95%);
  --color-contrast-lower-h: 210;
  --color-contrast-lower-s: 0%;
  --color-contrast-lower-l: 95%;
  --color-contrast-low: hsl(210, 0%, 82%);
  --color-contrast-low-h: 210;
  --color-contrast-low-s: 0%;
  --color-contrast-low-l: 82%;
  --color-contrast-medium: hsl(210, 0%, 45%);
  --color-contrast-medium-h: 210;
  --color-contrast-medium-s: 0%;
  --color-contrast-medium-l: 45%;
  --color-contrast-high: hsl(220, 0%, 16%);
  --color-contrast-high-h: 220;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 16%;
  --color-contrast-higher: hsl(218, 0%, 7%);
  --color-contrast-higher-h: 218;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 7%;
}

@supports (--css: variables) {
  [data-theme="intro"],
  [data-theme="dark"] {
    --color-topbar: hsl(0, 0%, 98%);
    --color-topbar-h: 0;
    --color-topbar-s: 0%;
    --color-topbar-l: 98%;
    --color-primary-darker: hsl(210, 0%, 13%);
    --color-primary-darker-h: 210;
    --color-primary-darker-s: 0%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(210, 0%, 26%);
    --color-primary-dark-h: 210;
    --color-primary-dark-s: 0%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(210, 0%, 36%);
    --color-primary-h: 210;
    --color-primary-s: 0%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(210, 0%, 46%);
    --color-primary-light-h: 210;
    --color-primary-light-s: 0%;
    --color-primary-light-l: 46%;
    --color-primary-lighter: hsl(210, 0%, 56%);
    --color-primary-lighter-h: 210;
    --color-primary-lighter-s: 0%;
    --color-primary-lighter-l: 56%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(218, 0%, 7%);
    --color-black-h: 218;
    --color-black-s: 0%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 40%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 40%;
    --color-bg: hsl(211, 0%, 9%);
    --color-bg-h: 211;
    --color-bg-s: 0%;
    --color-bg-l: 9%;
    --color-contrast-lower: hsl(211, 0%, 11%);
    --color-contrast-lower-h: 211;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 11%;
    --color-contrast-low: hsl(211, 0%, 20%);
    --color-contrast-low-h: 211;
    --color-contrast-low-s: 0%;
    --color-contrast-low-l: 20%;
    --color-contrast-medium: hsl(210, 0%, 53%);
    --color-contrast-medium-h: 210;
    --color-contrast-medium-s: 0%;
    --color-contrast-medium-l: 53%;
    --color-contrast-high: hsl(210, 0%, 86%);
    --color-contrast-high-h: 210;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 86%;
    --color-contrast-higher: hsl(210, 0%, 98%);
    --color-contrast-higher-h: 210;
    --color-contrast-higher-s: 0%;
    --color-contrast-higher-l: 98%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@supports (--css: variables) {
  [data-theme="prologue"] {
    --color-topbar: hsl(210, 0%, 13%);
    --color-topbar-h: 210;
    --color-topbar-s: 0%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(210, 0%, 13%);
    --color-primary-darker-h: 210;
    --color-primary-darker-s: 0%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(210, 0%, 26%);
    --color-primary-dark-h: 210;
    --color-primary-dark-s: 0%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(210, 0%, 36%);
    --color-primary-h: 210;
    --color-primary-s: 0%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(210, 0%, 73%);
    --color-primary-light-h: 210;
    --color-primary-light-s: 0%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(210, 0%, 82%);
    --color-primary-lighter-h: 210;
    --color-primary-lighter-s: 0%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(218, 0%, 7%);
    --color-black-h: 218;
    --color-black-s: 0%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(210, 0%, 74%);
    --color-bg-h: 210;
    --color-bg-s: 0%;
    --color-bg-l: 74%;
    --color-contrast-lower: hsl(210, 0%, 70%);
    --color-contrast-lower-h: 210;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(210, 0%, 61%);
    --color-contrast-low-h: 210;
    --color-contrast-low-s: 0%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(210, 0%, 35%);
    --color-contrast-medium-h: 210;
    --color-contrast-medium-s: 0%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(210, 0%, 13%);
    --color-contrast-high-h: 210;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(218, 0%, 7%);
    --color-contrast-higher-h: 218;
    --color-contrast-higher-s: 0%;
    --color-contrast-higher-l: 7%;
  }
}

@supports (--css: variables) {
  [data-theme="film-section"] {
    --color-topbar: hsl(357, 57%, 13%);
    --color-topbar-h: 357;
    --color-topbar-s: 57%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(357, 57%, 13%);
    --color-primary-darker-h: 357;
    --color-primary-darker-s: 57%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(357, 57%, 26%);
    --color-primary-dark-h: 357;
    --color-primary-dark-s: 57%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(357, 57%, 36%);
    --color-primary-h: 357;
    --color-primary-s: 57%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(357, 57%, 73%);
    --color-primary-light-h: 357;
    --color-primary-light-s: 57%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(357, 57%, 82%);
    --color-primary-lighter-h: 357;
    --color-primary-lighter-s: 57%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(218, 22%, 7%);
    --color-black-h: 218;
    --color-black-s: 22%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(357, 57%, 92%);
    --color-bg-h: 357;
    --color-bg-s: 57%;
    --color-bg-l: 92%;
    --color-contrast-lower: hsl(357, 57%, 70%);
    --color-contrast-lower-h: 357;
    --color-contrast-lower-s: 57%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(357, 57%, 61%);
    --color-contrast-low-h: 357;
    --color-contrast-low-s: 57%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(357, 57%, 35%);
    --color-contrast-medium-h: 357;
    --color-contrast-medium-s: 57%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(357, 12%, 13%);
    --color-contrast-high-h: 357;
    --color-contrast-high-s: 12%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(357, 22%, 7%);
    --color-contrast-higher-h: 357;
    --color-contrast-higher-s: 22%;
    --color-contrast-higher-l: 7%;
  }
}

@supports (--css: variables) {
  [data-theme="tv-section"] {
    --color-topbar: hsl(210, 57%, 13%);
    --color-topbar-h: 210;
    --color-topbar-s: 57%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(210, 57%, 13%);
    --color-primary-darker-h: 210;
    --color-primary-darker-s: 57%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(210, 57%, 26%);
    --color-primary-dark-h: 210;
    --color-primary-dark-s: 57%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(210, 57%, 36%);
    --color-primary-h: 210;
    --color-primary-s: 57%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(210, 57%, 73%);
    --color-primary-light-h: 210;
    --color-primary-light-s: 57%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(210, 57%, 82%);
    --color-primary-lighter-h: 210;
    --color-primary-lighter-s: 57%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(218, 22%, 7%);
    --color-black-h: 218;
    --color-black-s: 22%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(210, 57%, 92%);
    --color-bg-h: 210;
    --color-bg-s: 57%;
    --color-bg-l: 92%;
    --color-contrast-lower: hsl(210, 57%, 70%);
    --color-contrast-lower-h: 210;
    --color-contrast-lower-s: 57%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(210, 57%, 61%);
    --color-contrast-low-h: 210;
    --color-contrast-low-s: 57%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(210, 57%, 35%);
    --color-contrast-medium-h: 210;
    --color-contrast-medium-s: 57%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(210, 12%, 13%);
    --color-contrast-high-h: 210;
    --color-contrast-high-s: 12%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(218, 22%, 7%);
    --color-contrast-higher-h: 218;
    --color-contrast-higher-s: 22%;
    --color-contrast-higher-l: 7%;
  }
}

@supports (--css: variables) {
  [data-theme="music-section"] {
    --color-topbar: hsl(266, 57%, 13%);
    --color-topbar-h: 266;
    --color-topbar-s: 57%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(266, 57%, 13%);
    --color-primary-darker-h: 266;
    --color-primary-darker-s: 57%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(266, 57%, 26%);
    --color-primary-dark-h: 266;
    --color-primary-dark-s: 57%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(266, 57%, 36%);
    --color-primary-h: 266;
    --color-primary-s: 57%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(266, 57%, 73%);
    --color-primary-light-h: 266;
    --color-primary-light-s: 57%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(266, 57%, 82%);
    --color-primary-lighter-h: 266;
    --color-primary-lighter-s: 57%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(266, 22%, 7%);
    --color-black-h: 266;
    --color-black-s: 22%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(266, 57%, 92%);
    --color-bg-h: 266;
    --color-bg-s: 57%;
    --color-bg-l: 92%;
    --color-contrast-lower: hsl(266, 57%, 70%);
    --color-contrast-lower-h: 266;
    --color-contrast-lower-s: 57%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(266, 57%, 61%);
    --color-contrast-low-h: 266;
    --color-contrast-low-s: 57%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(266, 57%, 35%);
    --color-contrast-medium-h: 266;
    --color-contrast-medium-s: 57%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(266, 12%, 13%);
    --color-contrast-high-h: 266;
    --color-contrast-high-s: 12%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(266, 22%, 7%);
    --color-contrast-higher-h: 266;
    --color-contrast-higher-s: 22%;
    --color-contrast-higher-l: 7%;
  }
}

@supports (--css: variables) {
  [data-theme="gaming-section"] {
    --color-topbar: hsl(149, 57%, 13%);
    --color-topbar-h: 149;
    --color-topbar-s: 57%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(149, 57%, 13%);
    --color-primary-darker-h: 149;
    --color-primary-darker-s: 57%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(149, 57%, 26%);
    --color-primary-dark-h: 149;
    --color-primary-dark-s: 57%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(149, 57%, 36%);
    --color-primary-h: 149;
    --color-primary-s: 57%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(149, 57%, 73%);
    --color-primary-light-h: 149;
    --color-primary-light-s: 57%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(149, 57%, 82%);
    --color-primary-lighter-h: 149;
    --color-primary-lighter-s: 57%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(149, 22%, 7%);
    --color-black-h: 149;
    --color-black-s: 22%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(149, 57%, 92%);
    --color-bg-h: 149;
    --color-bg-s: 57%;
    --color-bg-l: 92%;
    --color-contrast-lower: hsl(149, 57%, 70%);
    --color-contrast-lower-h: 149;
    --color-contrast-lower-s: 57%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(149, 57%, 61%);
    --color-contrast-low-h: 149;
    --color-contrast-low-s: 57%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(149, 57%, 35%);
    --color-contrast-medium-h: 149;
    --color-contrast-medium-s: 57%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(149, 12%, 13%);
    --color-contrast-high-h: 149;
    --color-contrast-high-s: 12%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(149, 22%, 7%);
    --color-contrast-higher-h: 149;
    --color-contrast-higher-s: 22%;
    --color-contrast-higher-l: 7%;
  }
}

@supports (--css: variables) {
  [data-theme="books-section"] {
    --color-topbar: hsl(25, 45%, 13%);
    --color-topbar-h: 25;
    --color-topbar-s: 45%;
    --color-topbar-l: 13%;
    --color-primary-darker: hsl(25, 45%, 13%);
    --color-primary-darker-h: 25;
    --color-primary-darker-s: 45%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(25, 45%, 26%);
    --color-primary-dark-h: 25;
    --color-primary-dark-s: 45%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(25, 45%, 36%);
    --color-primary-h: 25;
    --color-primary-s: 45%;
    --color-primary-l: 36%;
    --color-primary-light: hsl(25, 45%, 73%);
    --color-primary-light-h: 25;
    --color-primary-light-s: 45%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(25, 45%, 82%);
    --color-primary-lighter-h: 25;
    --color-primary-lighter-s: 45%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 57%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 57%;
    --color-badge-l: 36%;
    --color-black: hsl(25, 22%, 7%);
    --color-black-h: 25;
    --color-black-s: 22%;
    --color-black-l: 7%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-grey: hsl(0, 0%, 50%);
    --color-grey-h: 0;
    --color-grey-s: 0%;
    --color-grey-l: 50%;
    --color-bg: hsl(25, 45%, 92%);
    --color-bg-h: 25;
    --color-bg-s: 45%;
    --color-bg-l: 92%;
    --color-contrast-lower: hsl(25, 45%, 70%);
    --color-contrast-lower-h: 25;
    --color-contrast-lower-s: 45%;
    --color-contrast-lower-l: 70%;
    --color-contrast-low: hsl(25, 45%, 61%);
    --color-contrast-low-h: 25;
    --color-contrast-low-s: 45%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(25, 45%, 35%);
    --color-contrast-medium-h: 25;
    --color-contrast-medium-s: 45%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(25, 12%, 13%);
    --color-contrast-high-h: 25;
    --color-contrast-high-s: 12%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(25, 22%, 7%);
    --color-contrast-higher-h: 25;
    --color-contrast-higher-s: 22%;
    --color-contrast-higher-l: 7%;
  }
}