codepen-mq-base.scss

$small-max-width:       40em;           /* 640px */
$medium-min-width:      40.063em;       /* 641px */
$medium-max-width:      64em;           /* 1024px */
$large-min-width:       64.063em;       /* 1025px */
$large-max-width:       80em;           /* 1280px */
$xlarge-min-width:      80.063em;       /* 1281px */
$xlarge-max-width:       90em;           /* 1400px */
$xxlarge-min-width:      90.063em;       /* 1441px */
$xxlarge-max-width:      120em;          /* 1920px */
$xxxlarge-min-width:     120.063em;      /* 1921px */


@mixin small {
  @media all and (max-width: #{$small-max-width}) {
    @content;
  }
}

@mixin small-landscape{
  @media all and (orientation: landscape) and (max-width: #{$small-max-width}) {
    @content;
  }
}

@mixin medium-only {
  @media all and (min-width: #{$medium-min-width}) and (max-width: #{$medium-max-width}) {
    @content;
  }
}

@mixin medium {
  @media all and (min-width: #{$medium-min-width}) {
    @content;
  }
}

@mixin large-only {
  @media all and (min-width: #{$large-min-width}) and (max-width: #{$large-max-width}) {
    @content;
  }
}

@mixin large {
  @media all and (min-width: #{$large-min-width}) {
    @content;
  }
}

@mixin xlarge-only {
  @media all and (min-width: #{$xlarge-min-width}) and (max-width: #{$xlarge-max-width}) {
    @content;
  }
}

@mixin xlarge {
  @media all and (min-width: #{$xlarge-min-width}) {
    @content;
  }
}

@mixin xxlarge-only {
  @media all and (min-width: #{$xxlarge-min-width}) and (max-width: #{$xxlarge-max-width}) {
    @content;
  }
}

@mixin xxlarge {
  @media all and (min-width: #{$xxlarge-min-width}) {
    @content;
  }
}

@mixin xxxlarge {
  @media all and (min-width: #{$xxxlarge-min-width}) {
    @content;
  }
}

// Padding fix

* {
  box-sizing: border-box;
}

// Font-sizes

html{
	font-size: 12px;
	font-size: 1rem;
	line-height: 1.5;
	@include medium { font-size: 14px; font-size: 1rem; line-height: 1.5; }
	@include large { font-size: 16px; font-size: 1rem; line-height: 1.5; }
	@include xlarge { font-size: 16px; font-size: 1rem; line-height: 1.5; }
	@include xxlarge { font-size: 20px; font-size: 1rem; line-height: 1.5; }
	@include xxxlarge { font-size: 22px; font-size: 1rem; line-height: 1.5; }
}

// Base colors
$color-one: rgba(255, 140, 0, 1);
$color-two: rgba(234, 255, 0, 1);
$color-three: rgba(240, 40, 0, 1); 
$color-four: rgba(0, 240, 156, 1);
$color-five: rgba(0, 196, 240, 1);
$color-six: rgba(152, 0, 240, 1);
$color-seven: rgba(240, 0, 196, 1);
$color-eight: rgba(240, 0, 60, 1);
$color-nine: rgba(44, 0, 240, 1);
$color-ten: rgba(151, 237, 218, 1);
$color-grey: rgba(185, 202, 199, 1);