:root {
  --black: hsl(0, 0%, 0%);
  --black900: hsla(0, 0%, 0%, .9);
  --black700: hsla(0, 0%, 0%, .7);
  --black500: hsla(0, 0%, 0%, .5);
  --black300: hsla(0, 0%, 0%, .3);
  --black100: hsla(0, 0%, 0%, .1);

  --white: hsl(0, 0%, 100%);
  --white900: hsla(0, 0%, 100%, .9);
  --white700: hsla(0, 0%, 100%, .7);
  --white500: hsla(0, 0%, 100%, .5);
  --white300: hsla(0, 0%, 100%, .3);
  --white100: hsla(0, 0%, 100%, .1);

  --facebook: #4267b2;
  --twitter: #1da1f2;

  --pink100: hsl(332, 94%, 99%);
  --pink200: hsl(332, 94%, 97%);
  --pink300: hsl(332, 94%, 72%);
  --pink500: hsl(338, 100%, 57%);
  --pink600: hsl(338, 100%, 57%);

  --purple100: hsl(288, 64%, 99%);
  --purple200: hsl(288, 64%, 97%);
  --purple300: hsl(288, 64%, 72%);
  --purple500: hsl(268, 60%, 47%);
  --purple600: hsl(268, 60%, 47%);

  --indigo100: hsl(226, 56%, 99%);
  --indigo200: hsl(226, 56%, 97%);
  --indigo300: hsl(226, 56%, 72%);
  --indigo500: hsl(226, 70%, 54%);
  --indigo600: hsl(226, 70%, 54%);

  --blue100: hsl(208, 99%, 99%);
  --blue200: hsl(208, 96%, 97%);
  --blue300: hsl(208, 82%, 78%);
  --blue400: hsl(208, 82%, 68%);
  --blue500: hsl(208, 98%, 50%);
  --blue600: hsl(208, 82%, 45%);
  --blue700: hsl(208, 99%, 35%);
  --blue800: hsl(208, 99%, 12%);
  --blue900: hsl(208, 99%, 10%);

  --red100: hsl(0, 100%, 99%);
  --red200: hsl(0, 100%, 97%);
  --red300: hsl(0, 85%, 72%);
  --red400: hsl(0, 85%, 78%);
  --red500: hsl(0, 100%, 65%);
  --red600: hsl(0, 100%, 45%);
  --red700: hsl(0, 100%, 40%);
  --red800: hsl(0, 100%, 12%);
  --red900: hsl(0, 100%, 10%);

  --green100: hsl(142, 60%, 99%);
  --green200: hsl(142, 60%, 97%);
  --green300: hsl(142, 40%, 72%);
  --green400: hsl(142, 34%, 64%);
  --green500: hsl(142, 68%, 42%);
  --green600: hsl(142, 62%, 40%);
  --green700: hsl(142, 60%, 38%);
  --green800: hsl(142, 60%, 12%);
  --green900: hsl(142, 60%, 10%);

  --amber100: hsl(40, 100%, 99%);
  --amber200: hsl(40, 100%, 97%);
  --amber300: hsl(40, 85%, 72%);
  --amber400: hsl(40, 85%, 78%);
  --amber500: hsl(40, 90%, 50%);
  --amber600: hsl(40, 90%, 42%);
  --amber700: hsl(40, 100%, 35%);
  --amber800: hsl(40, 100%, 12%);
  --amber900: hsl(40, 100%, 10%);

  --teal100: hsl(172, 100%, 99%);
  --teal200: hsl(172, 100%, 97%);
  --teal300: hsl(172, 95%, 72%);
  --teal500: hsl(180, 100%, 36%);
  --teal600: hsl(180, 60%, 40%);
  --teal700: hsl(172, 52%, 38%);

  --lime100: hsl(68, 74%, 99%);
  --lime200: hsl(68, 74%, 97%);
  --lime300: hsl(68, 74%, 72%);
  --lime500: hsl(68, 82%, 50%);
  --lime600: hsl(68, 82%, 50%);

  --yellow100: hsl(54, 100%, 99%);
  --yellow200: hsl(54, 100%, 97%);
  --yellow300: hsl(54, 100%, 92%);
  --yellow400: hsl(54, 100%, 72%);
  --yellow500: hsl(52, 100%, 50%);
  --yellow600: hsl(52, 100%, 50%);

  --orange100: hsl(36, 100%, 99%);
  --orange200: hsl(36, 100%, 97%);
  --orange300: hsl(36, 100%, 72%);
  --orange500: hsl(30, 100%, 50%);
  --orange600: hsl(30, 100%, 50%);

  --violet100: hsl(264, 52%, 99%);
  --violet200: hsl(264, 52%, 97%);
  --violet300: hsl(264, 52%, 72%);
  --violet500: hsl(246, 60%, 52%);
  --violet600: hsl(246, 60%, 52%);

  --gray100: hsl(208, 40%, 99%); /* Backgrounds */
  --gray200: hsl(208, 32%, 97%); /* Backgrounds & strokes */
  --gray300: hsl(208, 24%, 93%); /* Backgrounds & strokes */
  --gray400: hsl(208, 22%, 86%); /* Strokes */
  --gray500: hsl(208, 18%, 76%); /* Stroke hovers */
  --gray600: hsl(208, 14%, 50%); /* Subtle text */
  --gray700: hsl(208, 18%, 18%); /* Backgrounds */
  --gray800: hsl(208, 22%, 13%); /* Backgrounds */
  --gray900: hsl(208, 30%, 10%); /* Backgrounds & primary text */

  --brown200: hsl(16, 25%, 97%);
  --brown500: hsl(16, 25%, 38%);

  --bronze100: hsl(12, 90%, 97%);
  --bronze200: hsl(12, 90%, 95%);
  --bronze300: hsl(12, 80%, 88%);
  --bronze400: hsl(12, 80%, 78%);
  --bronze500: hsl(12, 36%, 70%);
  --bronze600: hsl(12, 50%, 50%);
  --bronze700: hsl(12, 60%, 40%);
  --bronze800: hsl(12, 50%, 12%);
  --bronze900: hsl(12, 50%, 10%);

  --gold100: hsl(31, 80%, 98%);
  --gold200: hsl(31, 80%, 95%);
  --gold300: hsl(31, 60%, 88%);
  --gold400: hsl(31, 60%, 78%);
  --gold500: hsl(31, 42%, 68%);
  --gold600: hsl(31, 40%, 50%);
  --gold700: hsl(31, 40%, 38%);
  --gold800: hsl(31, 30%, 12%);
  --gold900: hsl(31, 30%, 10%);
}