//Color Variables
$color-quartz:           hsl(0, 0%, 29%);
$color-timberwolf:       hsl(0, 0%, 85%);
$color-white:            hsl(0, 0%,100%);

$color-selective-yellow: hsl(43, 100%, 50%);
$color-mikado-yellow:    hsl(45, 95%, 54%);
$color-mustard:          hsl(46, 100%, 67%);

$color-rolling-stone:    hsl(210, 4%, 50%);
$color-taupe-gray:       hsl(210, 5%, 56%);
$color-anti-flash-white: hsl(210, 25%, 95%);
$color-text-base:        hsl(213, 4%, 50%);
$color-gainsboro:        hsl(213, 13%, 86%);
$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
$color-bombay:           hsl(215, 9%, 73%);
$color-dark-lava:        hsl(216, 4%, 22%);
$color-link-water:       hsl(221, 51%, 90%);
$color-purple-dark:      hsl(233, 18%, 29%);
$color-spun-pearl:       hsl(244, 10%, 70%);
$color-majorelle-blue:   hsl(244, 73%, 62%);


%shadow {
  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
}

%content-padding {
  padding: 2.6em;
}

%frame {
  @extend %shadow;
  background-color: $color-white;
}

$breakpoints: (
  phone: 480px,
  tablet: 768px,
  desktop: 1024px,
);