/* Coolors Exported Palette - coolors.co/4f4e4d-1b998b-fffd82-ff9b71-e84855 */

/* HSL */
// $color1: hsla(30%, 1%, 31%, 1);
// $color2: hsla(173%, 70%, 35%, 1);
// $color3: hsla(59%, 100%, 75%, 1);
// $color4: hsla(18%, 100%, 72%, 1);
// $color5: hsla(355%, 78%, 60%, 1);

/* RGB */
$color1: rgba(79, 78, 77, 1);
$color2: rgba(27, 153, 139, 1);
$color3: rgba(255, 253, 130, 1);
$color4: rgba(255, 155, 113, 1);
$color5: rgba(232, 72, 85, 1);

$fg-primary: #222;
$bg-primary: #f0f0f0;

$screen-x-small: 320px;
$screen-small: 640px;
$screen-wide: 1200px;
$screen-ultrawide: 1600px;

/** ### forSize
  * This mixin allows us to apply some rules selectively based on the screen
  * size. There are three primary sizes: `small`, `medium`, and `large`, which
  * are mutually exclusive. Additionally there are two additional sizes:
  * `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
  * value which is not the small screen size, so it overlaps with medium,
  * large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
  * than large, but neither large nor ultraLarge specify maximum widths,
  * so ultraLarge is a strict subset of large. A screen large enough to match
  * ultraLarge will also match large (compare with medium and large: matching
  * medium means it will not match large, and vice versa). */
@mixin for-size($size) {

  @if $size == xsmall {
    @media screen and (max-width: $screen-x-small) { @content; }
  } @else if $size == small {
    @media screen and (max-width: $screen-small) { @content; }
  } @else if $size == not-small {
    @media screen and (min-width: $screen-small + 1) { @content; }
  } @else if $size == medium {
    @media screen and (min-width: $screen-small + 1) and (max-width: $screen-wide - 1) { @content; }
  } @else if $size == large {
    @media screen and (min-width: $screen-wide) { @content; }
  } @else if $size == ultra-large {
    @media screen and (min-width: $screen-ultrawide) { @content; }
  }
}