:root,
[data-theme="default"] {
  --color-topbar: hsl(215, 100%, 20%);
  --color-topbar-h: 215;
  --color-topbar-s: 100%;
  --color-topbar-l: 20%;
  --color-primary-darker: hsl(15, 100%, 15%);
  --color-primary-darker-h: 15;
  --color-primary-darker-s: 100%;
  --color-primary-darker-l: 15%;
  --color-primary-dark: hsl(25, 100%, 25%);
  --color-primary-dark-h: 25;
  --color-primary-dark-s: 100%;
  --color-primary-dark-l: 25%;
  --color-primary: hsl(50, 100%, 40%);
  --color-primary-h: 50;
  --color-primary-s: 100%;
  --color-primary-l: 40%;
  --color-primary-light: hsl(50, 100%, 75%);
  --color-primary-light-h: 50;
  --color-primary-light-s: 100%;
  --color-primary-light-l: 75%;
  --color-primary-lighter: hsl(50, 100%, 95%);
  --color-primary-lighter-h: 50;
  --color-primary-lighter-s: 100%;
  --color-primary-lighter-l: 95%;
  --color-badge: hsl(0, 100%, 35%);
  --color-badge-h: 0;
  --color-badge-s: 100%;
  --color-badge-l: 35%;
  --color-black: hsl(0, 0%, 7%);
  --color-black-h: 0;
  --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(30, 190%, 90%);
  --color-contrast-lower-h: 30;
  --color-contrast-lower-s: 100%;
  --color-contrast-lower-l: 90%;
  --color-contrast-low: hsl(350, 100%, 82%);
  --color-contrast-low-h: 0;
  --color-contrast-low-s: 0%;
  --color-contrast-low-l: 82%;
  --color-contrast-medium: hsl(140, 50%, 35%);
  --color-contrast-medium-h: 140;
  --color-contrast-medium-s: 50%;
  --color-contrast-medium-l: 35%;
  --color-contrast-high: hsl(0, 0%, 16%);
  --color-contrast-high-h: 0;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 16%;
  --color-contrast-higher: hsl(0, 5%, 7%);
  --color-contrast-higher-h: 0;
  --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(0, 0%, 13%);
    --color-primary-darker-h: 0;
    --color-primary-darker-s: 0%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(0, 0%, 26%);
    --color-primary-dark-h: 0;
    --color-primary-dark-s: 0%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(215, 100%, 10%);
    --color-primary-h: 215;
    --color-primary-s: 100%;
    --color-primary-l: 10%;
    --color-primary-light: hsl(0, 0%, 46%);
    --color-primary-light-h: 0;
    --color-primary-light-s: 0%;
    --color-primary-light-l: 46%;
    --color-primary-lighter: hsl(0, 0%, 56%);
    --color-primary-lighter-h: 0;
    --color-primary-lighter-s: 0%;
    --color-primary-lighter-l: 56%;
    --color-badge: hsl(0, 0%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 0%;
    --color-badge-l: 36%;
    --color-black: hsl(0, 0%, 7%);
    --color-black-h: 0;
    --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(215, 100%, 20%);
    --color-bg-h: 215;
    --color-bg-s: 100%;
    --color-bg-l: 20%;
    --color-contrast-lower: hsl(0, 0%, 11%);
    --color-contrast-lower-h: 0;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 11%;
    --color-contrast-low: hsl(215, 100%, 13%);
    --color-contrast-low-h: 215;
    --color-contrast-low-s: 100%;
    --color-contrast-low-l: 13%;
    --color-contrast-medium: hsl(0, 0%, 53%);
    --color-contrast-medium-h: 0;
    --color-contrast-medium-s: 0%;
    --color-contrast-medium-l: 53%;
    --color-contrast-high: hsl(0, 0%, 86%);
    --color-contrast-high-h: 0;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 86%;
    --color-contrast-higher: hsl(0, 0%, 98%);
    --color-contrast-higher-h: 0;
    --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(0, 100%, 23%);
    --color-topbar-h: 0;
    --color-topbar-s: 100%;
    --color-topbar-l: 23%;
    --color-primary-darker: hsl(0, 0%, 13%);
    --color-primary-darker-h: 0;
    --color-primary-darker-s: 0%;
    --color-primary-darker-l: 13%;
    --color-primary-dark: hsl(0, 0%, 26%);
    --color-primary-dark-h: 0;
    --color-primary-dark-s: 0%;
    --color-primary-dark-l: 26%;
    --color-primary: hsl(215, 100%, 25%);
    --color-primary-h: 215;
    --color-primary-s: 100%;
    --color-primary-l: 25%;
    --color-primary-light: hsl(0, 0%, 73%);
    --color-primary-light-h: 0;
    --color-primary-light-s: 0%;
    --color-primary-light-l: 73%;
    --color-primary-lighter: hsl(215, 100%, 82%);
    --color-primary-lighter-h: 215;
    --color-primary-lighter-s: 100%;
    --color-primary-lighter-l: 82%;
    --color-badge: hsl(0, 100%, 36%);
    --color-badge-h: 0;
    --color-badge-s: 100%;
    --color-badge-l: 36%;
    --color-black: hsl(0, 0%, 7%);
    --color-black-h: 0;
    --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(50, 100%, 74%);
    --color-bg-h: 50;
    --color-bg-s: 100%;
    --color-bg-l: 74%;
    --color-contrast-lower: hsl(30, 100%, 80%);
    --color-contrast-lower-h: 30;
    --color-contrast-lower-s: 100%;
    --color-contrast-lower-l: 80%;
    --color-contrast-low: hsl(30, 100%, 75%);
    --color-contrast-low-h: 30;
    --color-contrast-low-s: 100%;
    --color-contrast-low-l: 75%;
    --color-contrast-medium: hsl(30, 100%, 35%);
    --color-contrast-medium-h: 30;
    --color-contrast-medium-s: 100%;
    --color-contrast-medium-l: 35%;
    --color-contrast-high: hsl(30, 100%, 13%);
    --color-contrast-high-h: 30;
    --color-contrast-high-s: 100%;
    --color-contrast-high-l: 13%;
    --color-contrast-higher: hsl(30, 100%, 7%);
    --color-contrast-higher-h: 30;
    --color-contrast-higher-s: 100%;
    --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%, 74%);
    --color-bg-h: 357;
    --color-bg-s: 57%;
    --color-bg-l: 74%;
    --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%, 74%);
    --color-bg-h: 210;
    --color-bg-s: 57%;
    --color-bg-l: 74%;
    --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%, 74%);
    --color-bg-h: 266;
    --color-bg-s: 57%;
    --color-bg-l: 74%;
    --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%, 74%);
    --color-bg-h: 149;
    --color-bg-s: 57%;
    --color-bg-l: 74%;
    --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%, 74%);
    --color-bg-h: 25;
    --color-bg-s: 45%;
    --color-bg-l: 74%;
    --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%;
  }
}