:root {
  --black: #222;
  --light-black: #333;
  --dark-black: #0a0a0a;
  --on-black: #fff;
  --white: #fff;
  --light-white: #fff;
  --dark-white: #f2f3f4;
  --on-white: #000;
  --grey: #868e96;
  --light-grey: #dee2e6;
  --dark-grey: #343a40;
  --on-grey: #fff;
  --error: #f8333c;
  --light-error: #f48489;
  --dark-error: #df000a;
  --on-error: #fff;
  --warning: #ffbf00;
  --light-warning: #f6ce55;
  --dark-warning: #b38600;
  --on-warning: #fff;
  --success: #44af69;
  --light-success: #7fc096;
  --dark-success: #268045;
  --on-success: #fff;
  --primary: #213a8f;
  --light-primary: #3c5ac1;
  --dark-primary: #0e1e56;
  --on-primary: #fff;
  --secondary: #ff947a;
  --light-secondary: #fcd3c9;
  --dark-secondary: #ff562e;
  --on-secondary: #fff;
  --accent1: #32f9e1;
  --light-accent1: #83f4e7;
  --dark-accent1: #00dfc4;
  --on-accent1: #fff;
  --accent2: #ee4266;
  --light-accent2: #ee8fa3;
  --dark-accent2: #dc0734;
  --on-accent2: #fff;
  --accent3: pink;
  --light-accent3: #fff;
  --dark-accent3: #ff748c;
  --on-accent3: #000;
  --red: #e03131;
  --light-red: #fa5252;
  --dark-red: #c92a2a;
  --on-red: #fff;
  --orange: #f46036;
  --light-orange: #f19d85;
  --dark-orange: #dd3100;
  --on-orange: #fff;
  --yellow: #ffbf00;
  --light-yellow: #f6ce55;
  --dark-yellow: #b38600;
  --on-yellow: #fff;
  --olive: grey;
  --light-olive: #a6a6a6;
  --dark-olive: #635151;
  --on-olive: #fff;
  --green: #44af69;
  --light-green: #7fc096;
  --dark-green: #268045;
  --on-green: #fff;
  --indigo: #43aa8b;
  --light-indigo: #7cbeaa;
  --dark-indigo: #257b61;
  --on-indigo: #fff;
  --azure: #32f9e1;
  --light-azure: #83f4e7;
  --dark-azure: #00dfc4;
  --on-azure: #fff;
  --blue: #1c7ed6;
  --light-blue: #4dabf7;
  --dark-blue: #1864ab;
  --on-blue: #fff;
  --violet: #9381ff;
  --light-violet: #d6d0fd;
  --dark-violet: #5135ff;
  --on-violet: #000;
  --pink: grey;
  --light-pink: #a6a6a6;
  --dark-pink: #635151;
  --on-pink: #fff;
  --transparent: transparent;
  --light-transparent: transparent;
  --dark-transparent: transparent;
  --on-transparent: #000;
  --background: #f2f3f4;
  --light-background: #fff;
  --dark-background: #dddedf;
  --paragraph: #121314;
  --light-paragraph: #000;
  --dark-paragraph: #323334;
  --on-paragraph: #fff;
  --navlink: #121314;
  --light-navlink: #323334;
  --dark-navlink: #000;
  --on-navlink: #fff;
  --link: #3c5ac1;
  --light-link: #32f9e1;
  --dark-link: #213a8f;
  --on-link: #fff;
  --heading: #000;
  --light-heading: #121314;
  --dark-heading: #000;
  --on-heading: #fff;
  --subtitle: #727374;
  --light-subtitle: #abc;
  --dark-subtitle: #121314;
  --on-subtitle: #fff;
  --metadata: #bcbdbe;
  --light-metadata: #dddedf;
  --dark-metadata: #abc;
  --on-metadata: #000;
  --twitter: #55acee;
  --light-twitter: #a0cdef;
  --dark-twitter: #0a8bec;
  --on-twitter: #fff;
  --facebook: #3b5999;
  --light-facebook: #6a82b6;
  --dark-facebook: #1f3669;
  --on-facebook: #fff;
  --instagram: #e4405f;
  --light-instagram: #e68a9c;
  --dark-instagram: #c81033;
  --on-instagram: #fff;
  --google: #f2f3f4;
  --light-google: #fff;
  --dark-google: #c4cdd6;
  --on-google: #000;
}
.x-black,
.xh-black:focus,
.xh-black:hover {
  --x: var(--black);
  --light-x: var(--light-black);
  --dark-x: var(--dark-black);
  --on-x: var(--on-black);
}
.y-black,
.yh-black:focus,
.yh-black:hover {
  --y: var(--black);
  --light-y: var(--light-black);
  --dark-y: var(--dark-black);
  --on-y: var(--on-black);
}
.x-white,
.xh-white:focus,
.xh-white:hover {
  --x: var(--white);
  --light-x: var(--light-white);
  --dark-x: var(--dark-white);
  --on-x: var(--on-white);
}
.y-white,
.yh-white:focus,
.yh-white:hover {
  --y: var(--white);
  --light-y: var(--light-white);
  --dark-y: var(--dark-white);
  --on-y: var(--on-white);
}
.x-grey,
.xh-grey:focus,
.xh-grey:hover {
  --x: var(--grey);
  --light-x: var(--light-grey);
  --dark-x: var(--dark-grey);
  --on-x: var(--on-grey);
}
.y-grey,
.yh-grey:focus,
.yh-grey:hover {
  --y: var(--grey);
  --light-y: var(--light-grey);
  --dark-y: var(--dark-grey);
  --on-y: var(--on-grey);
}
.x-primary,
.xh-primary:focus,
.xh-primary:hover {
  --x: var(--primary);
  --light-x: var(--light-primary);
  --dark-x: var(--dark-primary);
  --on-x: var(--on-primary);
}
.y-primary,
.yh-primary:focus,
.yh-primary:hover {
  --y: var(--primary);
  --light-y: var(--light-primary);
  --dark-y: var(--dark-primary);
  --on-y: var(--on-primary);
}
.x-secondary,
.xh-secondary:focus,
.xh-secondary:hover {
  --x: var(--secondary);
  --light-x: var(--light-secondary);
  --dark-x: var(--dark-secondary);
  --on-x: var(--on-secondary);
}
.y-secondary,
.yh-secondary:focus,
.yh-secondary:hover {
  --y: var(--secondary);
  --light-y: var(--light-secondary);
  --dark-y: var(--dark-secondary);
  --on-y: var(--on-secondary);
}
.x-accent1,
.xh-accent1:focus,
.xh-accent1:hover {
  --x: var(--accent1);
  --light-x: var(--light-accent1);
  --dark-x: var(--dark-accent1);
  --on-x: var(--on-accent1);
}
.y-accent1,
.yh-accent1:focus,
.yh-accent1:hover {
  --y: var(--accent1);
  --light-y: var(--light-accent1);
  --dark-y: var(--dark-accent1);
  --on-y: var(--on-accent1);
}
.x-accent2,
.xh-accent2:focus,
.xh-accent2:hover {
  --x: var(--accent2);
  --light-x: var(--light-accent2);
  --dark-x: var(--dark-accent2);
  --on-x: var(--on-accent2);
}
.y-accent2,
.yh-accent2:focus,
.yh-accent2:hover {
  --y: var(--accent2);
  --light-y: var(--light-accent2);
  --dark-y: var(--dark-accent2);
  --on-y: var(--on-accent2);
}
.x-accent3,
.xh-accent3:focus,
.xh-accent3:hover {
  --x: var(--accent3);
  --light-x: var(--light-accent3);
  --dark-x: var(--dark-accent3);
  --on-x: var(--on-accent3);
}
.y-accent3,
.yh-accent3:focus,
.yh-accent3:hover {
  --y: var(--accent3);
  --light-y: var(--light-accent3);
  --dark-y: var(--dark-accent3);
  --on-y: var(--on-accent3);
}
.x-error,
.xh-error:focus,
.xh-error:hover {
  --x: var(--error);
  --light-x: var(--light-error);
  --dark-x: var(--dark-error);
  --on-x: var(--on-error);
}
.y-error,
.yh-error:focus,
.yh-error:hover {
  --y: var(--error);
  --light-y: var(--light-error);
  --dark-y: var(--dark-error);
  --on-y: var(--on-error);
}
.x-warning,
.xh-warning:focus,
.xh-warning:hover {
  --x: var(--warning);
  --light-x: var(--light-warning);
  --dark-x: var(--dark-warning);
  --on-x: var(--on-warning);
}
.y-warning,
.yh-warning:focus,
.yh-warning:hover {
  --y: var(--warning);
  --light-y: var(--light-warning);
  --dark-y: var(--dark-warning);
  --on-y: var(--on-warning);
}
.x-success,
.xh-success:focus,
.xh-success:hover {
  --x: var(--success);
  --light-x: var(--light-success);
  --dark-x: var(--dark-success);
  --on-x: var(--on-success);
}
.y-success,
.yh-success:focus,
.yh-success:hover {
  --y: var(--success);
  --light-y: var(--light-success);
  --dark-y: var(--dark-success);
  --on-y: var(--on-success);
}
.x-red,
.xh-red:focus,
.xh-red:hover {
  --x: var(--red);
  --light-x: var(--light-red);
  --dark-x: var(--dark-red);
  --on-x: var(--on-red);
}
.y-red,
.yh-red:focus,
.yh-red:hover {
  --y: var(--red);
  --light-y: var(--light-red);
  --dark-y: var(--dark-red);
  --on-y: var(--on-red);
}
.x-orange,
.xh-orange:focus,
.xh-orange:hover {
  --x: var(--orange);
  --light-x: var(--light-orange);
  --dark-x: var(--dark-orange);
  --on-x: var(--on-orange);
}
.y-orange,
.yh-orange:focus,
.yh-orange:hover {
  --y: var(--orange);
  --light-y: var(--light-orange);
  --dark-y: var(--dark-orange);
  --on-y: var(--on-orange);
}
.x-yellow,
.xh-yellow:focus,
.xh-yellow:hover {
  --x: var(--yellow);
  --light-x: var(--light-yellow);
  --dark-x: var(--dark-yellow);
  --on-x: var(--on-yellow);
}
.y-yellow,
.yh-yellow:focus,
.yh-yellow:hover {
  --y: var(--yellow);
  --light-y: var(--light-yellow);
  --dark-y: var(--dark-yellow);
  --on-y: var(--on-yellow);
}
.x-olive,
.xh-olive:focus,
.xh-olive:hover {
  --x: var(--olive);
  --light-x: var(--light-olive);
  --dark-x: var(--dark-olive);
  --on-x: var(--on-olive);
}
.y-olive,
.yh-olive:focus,
.yh-olive:hover {
  --y: var(--olive);
  --light-y: var(--light-olive);
  --dark-y: var(--dark-olive);
  --on-y: var(--on-olive);
}
.x-green,
.xh-green:focus,
.xh-green:hover {
  --x: var(--green);
  --light-x: var(--light-green);
  --dark-x: var(--dark-green);
  --on-x: var(--on-green);
}
.y-green,
.yh-green:focus,
.yh-green:hover {
  --y: var(--green);
  --light-y: var(--light-green);
  --dark-y: var(--dark-green);
  --on-y: var(--on-green);
}
.x-indigo,
.xh-indigo:focus,
.xh-indigo:hover {
  --x: var(--indigo);
  --light-x: var(--light-indigo);
  --dark-x: var(--dark-indigo);
  --on-x: var(--on-indigo);
}
.y-indigo,
.yh-indigo:focus,
.yh-indigo:hover {
  --y: var(--indigo);
  --light-y: var(--light-indigo);
  --dark-y: var(--dark-indigo);
  --on-y: var(--on-indigo);
}
.x-azure,
.xh-azure:focus,
.xh-azure:hover {
  --x: var(--azure);
  --light-x: var(--light-azure);
  --dark-x: var(--dark-azure);
  --on-x: var(--on-azure);
}
.y-azure,
.yh-azure:focus,
.yh-azure:hover {
  --y: var(--azure);
  --light-y: var(--light-azure);
  --dark-y: var(--dark-azure);
  --on-y: var(--on-azure);
}
.x-blue,
.xh-blue:focus,
.xh-blue:hover {
  --x: var(--blue);
  --light-x: var(--light-blue);
  --dark-x: var(--dark-blue);
  --on-x: var(--on-blue);
}
.y-blue,
.yh-blue:focus,
.yh-blue:hover {
  --y: var(--blue);
  --light-y: var(--light-blue);
  --dark-y: var(--dark-blue);
  --on-y: var(--on-blue);
}
.x-violet,
.xh-violet:focus,
.xh-violet:hover {
  --x: var(--violet);
  --light-x: var(--light-violet);
  --dark-x: var(--dark-violet);
  --on-x: var(--on-violet);
}
.y-violet,
.yh-violet:focus,
.yh-violet:hover {
  --y: var(--violet);
  --light-y: var(--light-violet);
  --dark-y: var(--dark-violet);
  --on-y: var(--on-violet);
}
.x-pink,
.xh-pink:focus,
.xh-pink:hover {
  --x: var(--pink);
  --light-x: var(--light-pink);
  --dark-x: var(--dark-pink);
  --on-x: var(--on-pink);
}
.y-pink,
.yh-pink:focus,
.yh-pink:hover {
  --y: var(--pink);
  --light-y: var(--light-pink);
  --dark-y: var(--dark-pink);
  --on-y: var(--on-pink);
}
.x-transparent,
.xh-transparent:focus,
.xh-transparent:hover {
  --x: var(--transparent);
  --light-x: var(--light-transparent);
  --dark-x: var(--dark-transparent);
  --on-x: var(--on-transparent);
}
.y-transparent,
.yh-transparent:focus,
.yh-transparent:hover {
  --y: var(--transparent);
  --light-y: var(--light-transparent);
  --dark-y: var(--dark-transparent);
  --on-y: var(--on-transparent);
}
.x-background,
.xh-background:focus,
.xh-background:hover {
  --x: var(--background);
  --light-x: var(--light-background);
  --dark-x: var(--dark-background);
  --on-x: var(--on-background);
}
.y-background,
.yh-background:focus,
.yh-background:hover {
  --y: var(--background);
  --light-y: var(--light-background);
  --dark-y: var(--dark-background);
  --on-y: var(--on-background);
}
.x-paragraph,
.xh-paragraph:focus,
.xh-paragraph:hover {
  --x: var(--paragraph);
  --light-x: var(--light-paragraph);
  --dark-x: var(--dark-paragraph);
  --on-x: var(--on-paragraph);
}
.y-paragraph,
.yh-paragraph:focus,
.yh-paragraph:hover {
  --y: var(--paragraph);
  --light-y: var(--light-paragraph);
  --dark-y: var(--dark-paragraph);
  --on-y: var(--on-paragraph);
}
.x-navlink,
.xh-navlink:focus,
.xh-navlink:hover {
  --x: var(--navlink);
  --light-x: var(--light-navlink);
  --dark-x: var(--dark-navlink);
  --on-x: var(--on-navlink);
}
.y-navlink,
.yh-navlink:focus,
.yh-navlink:hover {
  --y: var(--navlink);
  --light-y: var(--light-navlink);
  --dark-y: var(--dark-navlink);
  --on-y: var(--on-navlink);
}
.x-link,
.xh-link:focus,
.xh-link:hover {
  --x: var(--link);
  --light-x: var(--light-link);
  --dark-x: var(--dark-link);
  --on-x: var(--on-link);
}
.y-link,
.yh-link:focus,
.yh-link:hover {
  --y: var(--link);
  --light-y: var(--light-link);
  --dark-y: var(--dark-link);
  --on-y: var(--on-link);
}
.x-heading,
.xh-heading:focus,
.xh-heading:hover {
  --x: var(--heading);
  --light-x: var(--light-heading);
  --dark-x: var(--dark-heading);
  --on-x: var(--on-heading);
}
.y-heading,
.yh-heading:focus,
.yh-heading:hover {
  --y: var(--heading);
  --light-y: var(--light-heading);
  --dark-y: var(--dark-heading);
  --on-y: var(--on-heading);
}
.x-subtitle,
.xh-subtitle:focus,
.xh-subtitle:hover {
  --x: var(--subtitle);
  --light-x: var(--light-subtitle);
  --dark-x: var(--dark-subtitle);
  --on-x: var(--on-subtitle);
}
.y-subtitle,
.yh-subtitle:focus,
.yh-subtitle:hover {
  --y: var(--subtitle);
  --light-y: var(--light-subtitle);
  --dark-y: var(--dark-subtitle);
  --on-y: var(--on-subtitle);
}
.x-metadata,
.xh-metadata:focus,
.xh-metadata:hover {
  --x: var(--metadata);
  --light-x: var(--light-metadata);
  --dark-x: var(--dark-metadata);
  --on-x: var(--on-metadata);
}
.y-metadata,
.yh-metadata:focus,
.yh-metadata:hover {
  --y: var(--metadata);
  --light-y: var(--light-metadata);
  --dark-y: var(--dark-metadata);
  --on-y: var(--on-metadata);
}
.x-twitter,
.xh-twitter:focus,
.xh-twitter:hover {
  --x: var(--twitter);
  --light-x: var(--light-twitter);
  --dark-x: var(--dark-twitter);
  --on-x: var(--on-twitter);
}
.y-twitter,
.yh-twitter:focus,
.yh-twitter:hover {
  --y: var(--twitter);
  --light-y: var(--light-twitter);
  --dark-y: var(--dark-twitter);
  --on-y: var(--on-twitter);
}
.x-facebook,
.xh-facebook:focus,
.xh-facebook:hover {
  --x: var(--facebook);
  --light-x: var(--light-facebook);
  --dark-x: var(--dark-facebook);
  --on-x: var(--on-facebook);
}
.y-facebook,
.yh-facebook:focus,
.yh-facebook:hover {
  --y: var(--facebook);
  --light-y: var(--light-facebook);
  --dark-y: var(--dark-facebook);
  --on-y: var(--on-facebook);
}
.x-instagram,
.xh-instagram:focus,
.xh-instagram:hover {
  --x: var(--instagram);
  --light-x: var(--light-instagram);
  --dark-x: var(--dark-instagram);
  --on-x: var(--on-instagram);
}
.y-instagram,
.yh-instagram:focus,
.yh-instagram:hover {
  --y: var(--instagram);
  --light-y: var(--light-instagram);
  --dark-y: var(--dark-instagram);
  --on-y: var(--on-instagram);
}
.x-google,
.xh-google:focus,
.xh-google:hover {
  --x: var(--google);
  --light-x: var(--light-google);
  --dark-x: var(--dark-google);
  --on-x: var(--on-google);
}
.y-google,
.yh-google:focus,
.yh-google:hover {
  --y: var(--google);
  --light-y: var(--light-google);
  --dark-y: var(--dark-google);
  --on-y: var(--on-google);
}
.ui-light {
  --background: #f2f3f4;
  --light-background: #fff;
  --dark-background: #dddedf;
  --paragraph: #121314;
  --light-paragraph: #000;
  --dark-paragraph: #323334;
  --on-paragraph: #fff;
  --navlink: #121314;
  --light-navlink: #323334;
  --dark-navlink: #000;
  --on-navlink: #fff;
  --link: #3c5ac1;
  --light-link: #32f9e1;
  --dark-link: #213a8f;
  --on-link: #fff;
  --heading: #000;
  --light-heading: #121314;
  --dark-heading: #000;
  --on-heading: #fff;
  --subtitle: #727374;
  --light-subtitle: #abc;
  --dark-subtitle: #121314;
  --on-subtitle: #fff;
  --metadata: #bcbdbe;
  --light-metadata: #dddedf;
  --dark-metadata: #abc;
  --on-metadata: #000;
}
#main.ui-light,
#main > .ui-light {
  --shadow: 0.2em 0.2em 0.5em rgba(188, 190, 189, 0.8);
}
.ui-dark {
  --background: #121314;
  --light-background: #323334;
  --dark-background: #000;
  --paragraph: #f2f3f4;
  --light-paragraph: #fff;
  --dark-paragraph: #dddedf;
  --on-paragraph: #000;
  --navlink: #f2f3f4;
  --light-navlink: #dddedf;
  --dark-navlink: #fff;
  --on-navlink: #000;
  --link: #00dfc4;
  --light-link: #009280;
  --dark-link: #32f9e1;
  --on-link: #fff;
  --heading: #fff;
  --light-heading: #fff;
  --dark-heading: #f2f3f4;
  --on-heading: #000;
  --subtitle: #bcbdbe;
  --light-subtitle: #abc;
  --dark-subtitle: #dddedf;
  --on-subtitle: #000;
  --metadata: #727374;
  --light-metadata: #323334;
  --dark-metadata: #abc;
  --on-metadata: #fff;
}
#main.ui-dark,
#main > .ui-dark {
  --shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.3);
}
.ui-iceberg {
  --background: #000;
  --light-background: #161821;
  --dark-background: #000;
  --paragraph: #c6c8d1;
  --light-paragraph: #d2d4de;
  --dark-paragraph: #9399b8;
  --on-paragraph: #161821;
  --navlink: #89b8c2;
  --light-navlink: #95c4ce;
  --dark-navlink: #4aa2b4;
  --on-navlink: #c6c8d1;
  --link: #89b8c2;
  --light-link: #95c4ce;
  --dark-link: #4aa2b4;
  --on-link: #c6c8d1;
  --heading: #c6c8d1;
  --light-heading: #d2d4de;
  --dark-heading: #9399b8;
  --on-heading: #161821;
  --subtitle: #9399b8;
  --light-subtitle: #c6c8d1;
  --dark-subtitle: #5866a6;
  --on-subtitle: #161821;
  --metadata: #84a0c6;
  --light-metadata: #91acd1;
  --dark-metadata: #4476ba;
  --on-metadata: #c6c8d1;
  --success: #b4be82;
  --light-success: #c0ca8e;
  --dark-success: #9bac47;
  --on-success: #c6c8d1;
  --error: #e27878;
  --light-error: #e98989;
  --dark-error: #e02d2d;
  --on-error: #c6c8d1;
  --warning: #e2a478;
  --light-warning: #e9b189;
  --dark-warning: #e0782d;
  --on-warning: #c6c8d1;
}
#main.ui-iceberg,
#main > .ui-iceberg {
  --shadow-hover: 0 0 4em rgba(149, 206, 196, 0.2);
}
.b-x {
  background: var(--x);
}
.c-x {
  color: var(--x);
  stroke: var(--x);
}
.d-x {
  border-color: var(--x);
}
.e-x {
  fill: var(--x);
}
.b-light-x {
  background: var(--light-x);
}
.c-light-x {
  color: var(--light-x);
  stroke: var(--light-x);
}
.e-light-x {
  fill: var(--light-x);
}
.b-dark-x {
  background: var(--dark-x);
}
.c-dark-x {
  color: var(--dark-x);
  stroke: var(--dark-x);
}
.e-dark-x {
  fill: var(--dark-x);
}
.b-on-x {
  background: var(--on-x);
}
.c-on-x {
  color: var(--on-x);
  stroke: var(--on-x);
}
.e-on-x {
  fill: var(--on-x);
}
.b-y {
  background: var(--y);
}
.c-y {
  color: var(--y);
  stroke: var(--y);
}
.d-y {
  border-color: var(--y);
}
.e-y {
  fill: var(--y);
}
.b-light-y {
  background: var(--light-y);
}
.c-light-y {
  color: var(--light-y);
  stroke: var(--light-y);
}
.e-light-y {
  fill: var(--light-y);
}
.b-dark-y {
  background: var(--dark-y);
}
.c-dark-y {
  color: var(--dark-y);
  stroke: var(--dark-y);
}
.e-dark-y {
  fill: var(--dark-y);
}
.b-on-y {
  background: var(--on-y);
}
.c-on-y {
  color: var(--on-y);
  stroke: var(--on-y);
}
.e-on-y {
  fill: var(--on-y);
}