@import url(//fonts.googleapis.com/css?family=Maven+Pro:400,700|Exo:400,600|PT+Mono);

/** ### 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 forSize($size) {

    @if $size == small {
        @media screen and (max-width: $smallScreen) { @content; } }
    @else if $size == notSmall {
        @media screen and (min-width: $smallScreen + 1) { @content; } }
    @else if $size == medium {
        @media screen and (min-width: $smallScreen + 1) and (max-width: $wideScreen - 1) { @content; } }
    @else if $size == large {
        @media screen and (min-width: $wideScreen) { @content; } }
    @else if $size == ultraLarge {
        @media screen and (min-width: $ultraWideScreen) { @content; } }
}


