@import url('https://fonts.googleapis.com/css?family=Slabo+27px');

@font-face {
  font-family: 'Slabo27px-Regular';
  src: url('assets/fonts/Slabo27px-Regular.woff2') format('woff2'),
       url('assets/fonts/Slabo27px-Regular.woff') format('woff'),
       url('assets/fonts/Slabo27px-Regular.ttf')  format('truetype'),
       url('assets/fonts/Slabo27px-Regular.eot?'),
       url('assets/fonts/Slabo27px-Regular.eot?#iefix') format('embedded-opentype'),
       url('assets/fonts/Slabo27px-Regular.svg#Slabo27px-Regular') format('svg'),
       url('assets/fonts/Slabo27px-Regular.otf') format('opentype');
}

$base-font-family:      "Slabo 27px", "Slabo27px-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$Monospace-font-family: "SF Mono", "Monaco", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;

$base-font-size:    16px;
$large-font-size:   18px;
$larger-font-size:  20px;
$small-font-size:   15px;
$smaller-font-size: 14px;
$base-line-height:  1.7;

$white:             #ffffff;
$heather:           #dce2ee;
$pewter:            #94a5ac;
$gumbo:             #6c8992;
$gumbo_dark:        #4a5d63;
$shark:             #1d262f;
$red:               #ff0000;
$tree_poppy:        #f99b15;
$lightning_yellow:  #fec418;
$amazon:            #30765c;
$ocean_green:       #48b685;
$cerulean:          #06b6ef;
$gothic:            #6796a6;
$blumine:           #275f80;
$link_color:        #005394;
$selection:         #ffdc71;

$fixed-nav-mobile:   48px;
$fixed-nav-tablet:   56px;
$fixed-nav-desktop:  72px;

$fixed-nav-1024-height:  48px;

$media-max-480:   "only screen and (max-width: 480px)";
$media-min-481:   "only screen and (min-width: 481px)";
$media-min-840:   "only screen and (min-width: 840px)";
$media-min-1024:  "only screen and (min-width: 1024px)";
$media-min-1072:  "only screen and (min-width: 1072px)";

$box-shadow-level-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$box-shadow-level-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$box-shadow-level-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$box-shadow-level-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
$box-shadow-level-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);