variables.scss

$white:         hsl(217,4%,96%);
$lighter:       hsl(217,4%,86%);
$light:         hsl(217,4%,71%);
$medium:        hsl(217,4%,48%);
$dark:          hsl(217,4%,29%);
$black:         hsl(217,4%,14%);

$web:           #6ECD56;
$html5:         #F16529;
$css3:          #33A9DC;
$sass:          #c69;

$red:           crimson;
$green:         $web;
$blue:          $css3;

$yellow:        hsl(48,86%,71%);
$light-yellow:  hsl(48,96%,86%);
$dark-yellow:   hsl(48,71%,48%);

$link:          $css3;
$visited:       $medium;
$background:    $white;

$small:         0.875rem;

$serif:         "Lora", "Playfair Display", Georgia, serif;
$sans-serif:    "Roboto", "Source Sans Pro", "Open Sans", Arial, sans-serif;
$monospace:     "Inconsolata", monospace;

.menu{ z-index: 9002;}
.navigation{ z-index: 9001;}
.overlay{ z-index: 9000;}

.header{ z-index: 200;}

.table-of-contents{ z-index: 100;}