@charset "UTF-8";
:root {
  --cyan--light: #ade7eb;
  --cyan: #5cced6;
  --cyan--vivid: #47e0eb;
  --cyan--dark: #299ba3;
  --cyan--dim: #144e52;
  --mint--light: #adebd6;
  --mint: #5cd6ad;
  --mint--vivid: #47ebb4;
  --mint--dark: #29a37a;
  --mint--dim: #14523d;
  --green--light: #b6ebad;
  --green: #6cd65c;
  --green--vivid: #5deb47;
  --green--dark: #39a329;
  --green--dim: #1d5214;
  --orange--background: #f8f4ed;
  /* --orange--background: #f5eddd; */
  --orange--light: #ebd6ad;
  --orange: #d6ad5c;
  --orange--vivid: #ebb447;
  --orange--dark: #a37a29;
  --orange--dim: #523d14;
  --pink--light: #ebadce;
  --pink: #d65c9d;
  --pink--vivid: #eb479e;
  --pink--dark: #a3296a;
  --pink--dim: #521435;
  --violet--light: #d6adeb;
  --violet: #ad5cd6;
  --violet--vivid: #b447eb;
  --violet--dark: #7a29a3;
  --violet--dim: #3d1452;
  --purple--light: #beadeb;
  --purple: #7c5cd6;
  --purple--vivid: #7347eb;
  --purple--dark: #4929a3;
  --purple--dim: #251452;

  --brand--color: var(--orange);
  --brand--vivid: var(--orange--vivid);
  --brand--background: var(--orange--background);
  --brand--light: var(--orange--light);
  --brand--dark: var(--orange--dark);
  --brand--dim: var(--orange--dim);

  --accent--color: var(--cyan);
  --accent-color: var(--accent--color);
  --accent--vivid: var(--cyan--vivid);
  --accent--light: var(--cyan--light);
  --accent--dark: var(--cyan--dark);
  --accent--dim: var(--cyan--dim);

  --greyscale_h: 0;
  --greyscale_s: 0%;
  --white: hsl(var(--greyscale_h), var(--greyscale_s), 100%);
  --offwhite: hsl(var(--greyscale_h), var(--greyscale_s), 96%);
  --glossy: hsl(var(--greyscale_h), var(--greyscale_s), 89%);
  --bright: hsl(var(--greyscale_h), var(--greyscale_s), 78%);
  --light: hsl(var(--greyscale_h), var(--greyscale_s), 67%);
  --gloomy: hsl(var(--greyscale_h), var(--greyscale_s), 56%);
  --grey: hsl(var(--greyscale_h), var(--greyscale_s), 46%);
  --gray: var(--grey);
  --dun: hsl(var(--greyscale_h), var(--greyscale_s), 36%);
  --dark: hsl(var(--greyscale_h), var(--greyscale_s), 27%);
  --night: hsl(var(--greyscale_h), var(--greyscale_s), 18%);
  --offblack: hsl(var(--greyscale_h), var(--greyscale_s), 9%);
  --black: hsl(var(--greyscale_h), var(--greyscale_s), 0%);

  --positive_color: hsl(120, 50%, 50%);
  --mediocre_color: hsl(60, 50%, 50%);
  --negative_color: hsl(0, 50%, 50%);

  --rss_color: hsl(33, 60%, 50%);
  --google_color: hsl(217, 89%, 61%);
  --googleplus_color: hsl(5, 69%, 54%);
  --pinterest_color: hsl(358, 70%, 47%);
  --youtube_color: hsl(358, 79%, 45%);
  --twitter_color: hsl(195, 60%, 50%);
  --facebook_color: hsl(222, 50%, 30%);
  --linkedin_color: hsl(201, 100%, 35%);
  --whatsapp_color: hsl(116, 84%, 34%);
  --instagram_color: hsl(325, 50%, 50%);

  --debug_color: rebeccapurple;
  --transparent-black: hsla(0, 0%, 0%, 0);
  --transparent-white: hsla(0, 0%, 100%, 0);
  --transparent-background: hsla(var(--greyscale_h), var(--greyscale_s), 97%, 0.7);
  --transparent: var(--transparent-white);
  --sepia_h: 38;

  --body-color: var(--night);
  --page-background-color: var(--accent--dim);
  --link-color: var(--brand--color);
  --link-color-hover: var(--accent--dim);
  --link-color-visited: var(--link-color);
  --link-color-active: var(--link-color-hover);
  --icon-color: var(--link-color);
}

.color--cyan--light {
  color: var(--cyan--light);
}
.color--cyan {
  color: var(--cyan);
}
.color--cyan--vivid {
  color: var(--cyan--vivid);
}
.color--cyan--dark {
  color: var(--cyan--dark);
}
.color--cyan--dim {
  color: var(--cyan--dim);
}
.color--mint--light {
  color: var(--mint--light);
}
.color--mint {
  color: var(--mint);
}
.color--mint--vivid {
  color: var(--mint--vivid);
}
.color--mint--dark {
  color: var(--mint--dark);
}
.color--mint--dim {
  color: var(--mint--dim);
}
.color--green--light {
  color: var(--green--light);
}
.color--green {
  color: var(--green);
}
.color--green--vivid {
  color: var(--green--vivid);
}
.color--green--dark {
  color: var(--green--dark);
}
.color--green--dim {
  color: var(--green--dim);
}
.color--orange--background {
  color: var(--orange--background);
}
.color--orange--light {
  color: var(--orange--light);
}
.color--orange {
  color: var(--orange);
}
.color--orange--vivid {
  color: var(--orange--vivid);
}
.color--orange--dark {
  color: var(--orange--dark);
}
.color--orange--dim {
  color: var(--orange--dim);
}
.color--pink--light {
  color: var(--pink--light);
}
.color--pink {
  color: var(--pink);
}
.color--pink--vivid {
  color: var(--pink--vivid);
}
.color--pink--dark {
  color: var(--pink--dark);
}
.color--pink--dim {
  color: var(--pink--dim);
}
.color--violet--light {
  color: var(--violet--light);
}
.color--violet {
  color: var(--violet);
}
.color--violet--vivid {
  color: var(--violet--vivid);
}
.color--violet--dark {
  color: var(--violet--dark);
}
.color--violet--dim {
  color: var(--violet--dim);
}
.color--purple--light {
  color: var(--purple--light);
}
.color--purple {
  color: var(--purple);
}
.color--purple--vivid {
  color: var(--purple--vivid);
}
.color--purple--dark {
  color: var(--purple--dark);
}
.color--purple--dim {
  color: var(--purple--dim);
}

.color--brand--color {
  color: var(--brand--color);
}
.color--brand--vivid {
  color: var(--brand--vivid);
}
.color--brand--background {
  color: var(--brand--background);
}
.color--brand--light {
  color: var(--brand--light);
}
.color--brand--dark {
  color: var(--brand--dark);
}
.color--brand--dim {
  color: var(--brand--dim);
}

.color--accent--color {
  color: var(--accent--color);
}
.color--accent--vivid {
  color: var(--accent--vivid);
}
.color--accent--light {
  color: var(--accent--light);
}
.color--accent--dark {
  color: var(--accent--dark);
}
.color--accent--dim {
  color: var(--accent--dim);
}

.color--white {
  color: var(--white);
}
.color--offwhite {
  color: var(--offwhite);
}
.color--glossy {
  color: var(--glossy);
}
.color--bright {
  color: var(--bright);
}
.color--light {
  color: var(--light);
}
.color--gloomy {
  color: var(--gloomy);
}
.color--grey {
  color: var(--grey);
}
.color--gray {
  color: var(--gray);
}
.color--dun {
  color: var(--dun);
}
.color--dark {
  color: var(--dark);
}
.color--night {
  color: var(--night);
}
.color--offblack {
  color: var(--offblack);
}
.color--black {
  color: var(--black);
}

.background--cyan--light {
  background-color: var(--cyan--light);
}
.background--cyan {
  background-color: var(--cyan);
}
.background--cyan--vivid {
  background-color: var(--cyan--vivid);
}
.background--cyan--dark {
  background-color: var(--cyan--dark);
}
.background--cyan--dim {
  background-color: var(--cyan--dim);
}
.background--mint--light {
  background-color: var(--mint--light);
}
.background--mint {
  background-color: var(--mint);
}
.background--mint--vivid {
  background-color: var(--mint--vivid);
}
.background--mint--dark {
  background-color: var(--mint--dark);
}
.background--mint--dim {
  background-color: var(--mint--dim);
}
.background--green--light {
  background-color: var(--green--light);
}
.background--green {
  background-color: var(--green);
}
.background--green--vivid {
  background-color: var(--green--vivid);
}
.background--green--dark {
  background-color: var(--green--dark);
}
.background--green--dim {
  background-color: var(--green--dim);
}
.background--orange--background {
  background-color: var(--orange--background);
}
.background--orange--light {
  background-color: var(--orange--light);
}
.background--orange {
  background-color: var(--orange);
}
.background--orange--vivid {
  background-color: var(--orange--vivid);
}
.background--orange--dark {
  background-color: var(--orange--dark);
}
.background--orange--dim {
  background-color: var(--orange--dim);
}
.background--pink--light {
  background-color: var(--pink--light);
}
.background--pink {
  background-color: var(--pink);
}
.background--pink--vivid {
  background-color: var(--pink--vivid);
}
.background--pink--dark {
  background-color: var(--pink--dark);
}
.background--pink--dim {
  background-color: var(--pink--dim);
}
.background--violet--light {
  background-color: var(--violet--light);
}
.background--violet {
  background-color: var(--violet);
}
.background--violet--vivid {
  background-color: var(--violet--vivid);
}
.background--violet--dark {
  background-color: var(--violet--dark);
}
.background--violet--dim {
  background-color: var(--violet--dim);
}
.background--purple--light {
  background-color: var(--purple--light);
}
.background--purple {
  background-color: var(--purple);
}
.background--purple--vivid {
  background-color: var(--purple--vivid);
}
.background--purple--dark {
  background-color: var(--purple--dark);
}
.background--purple--dim {
  background-color: var(--purple--dim);
}

.background--brand--color {
  background-color: var(--brand--color);
}
.background--brand--vivid {
  background-color: var(--brand--vivid);
}
.background--brand--background {
  background-color: var(--brand--background);
}
.background--brand--light {
  background-color: var(--brand--light);
}
.background--brand--dark {
  background-color: var(--brand--dark);
}
.background--brand--dim {
  background-color: var(--brand--dim);
}

.background--accent--color {
  background-color: var(--accent--color);
}
.background--accent--vivid {
  background-color: var(--accent--vivid);
}
.background--accent--light {
  background-color: var(--accent--light);
}
.background--accent--dark {
  background-color: var(--accent--dark);
}
.background--accent--dim {
  background-color: var(--accent--dim);
}

.background--white {
  background-color: var(--white);
}
.background--offwhite {
  background-color: var(--offwhite);
}
.background--glossy {
  background-color: var(--glossy);
}
.background--bright {
  background-color: var(--bright);
}
.background--light {
  background-color: var(--light);
}
.background--gloomy {
  background-color: var(--gloomy);
}
.background--grey {
  background-color: var(--grey);
}
.background--gray {
  background-color: var(--gray);
}
.background--dun {
  background-color: var(--dun);
}
.background--dark {
  background-color: var(--dark);
}
.background--night {
  background-color: var(--night);
}
.background--offblack {
  background-color: var(--offblack);
}
.background--black {
  background-color: var(--black);
}
.background--transparent {
  background-color: var(--transparent-background);
}
.background--gradient {
  background: repeating-linear-gradient(
      162deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 53.33333px,
      var(--brand--dark) 0,
      var(--brand--dark) 54.33333px
    ),
    repeating-linear-gradient(-72deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 32px, var(--accent--dim) 0, var(--accent--dim) 33px),
    linear-gradient(72deg, #2e2e2e 10%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, var(--brand--light) 90%),
    linear-gradient(72deg, var(--accent--dark) 40%, var(--brand--vivid) 60%);
}

