Sass config boiletplate

@charset "utf-8";
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.otf");
}
// @font-face {
//   font-family: "Merriweather";
//   src: url("../fonts/Merriweather-Regular.ttf");
// }

// main fonts
$body: 'Poppins', Helvetica, sans-serif;
$header: 'Poppins', Helvetica, sans-serif; 
// $copy: 'Merriweather', Helvetica, serif;

$bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$color0: rgb(255,179,71); // Main
$color1: rgb(233,79,55); // About Me
$color2: rgb(93,185,209); // Maxwell
$color3: rgb(0, 157, 235); // SALT 
$color4: rgb(221,0,100); // Maxi Cosi
$color5: rgb( 139, 197, 63); // Allcells
$color6: rgb(144,19,254); // UI Design
$color7: rgb(243,117,58); // Design Snippets
$color8: rgb(248, 189, 206); // other Snippets
$color9: rgb(133, 255, 199); // other Snippets

$white:            #fff;

$blueoverlay: 	   rgba(104, 167, 185, 0.4);
$whiteoverlay:     rgba(255,255,255,0.5);
$blackoverlay:     rgba(0,0,0,0.5);


// ** Breakpoints **
$tinyscreen:        480px;
$mobilescreen:      640px;
$mediumscreen:      960px;
$largescreen:       1024px;  
$xlargescreen:      1366px;
$xxlargescreen:     1500px;
$xxxlargescreen:    1800px;
$superlargescreen:  2100px;

// ** Master Container Width **
$masterwidth:      1024px; //current row width

// ** Font Sizes **
$fontsmall:        .6rem;
$fontmobile:        .9rem;
$fontbase:         1.1rem;
$fontlarge:        1.3rem;
$fontlarger:       1.5rem;
$fontxlarger:      1.8rem;
$fonthuge:         2.2rem;
// ** Line Heights **
$linesmall:        $fontsmall*1.5;
$linebase:         $fontbase*1.5;
$linelarge:        $fontlarge*1.5;
$linelarger:       $fontlarger*1.2;
$linexlarger:      $fontxlarger*1.2;
$linehuge:         $fonthuge*1.5;

// ** Z-index Scale **
$z0:  0;
$z1:  10;
$z2:  20;
$z3:  30;
$z4:  40;
$z5:  50;
$z6:  60;
$z7:  70;
$z8:  80;
$z9:  90;
$z10: 100;


// MEDIA QUERY MIXINS

@mixin tiny { // Screens below 480 
  @media (max-width: #{$tinyscreen}) {
    @content;
  }
}
@mixin mobile { // Screens below 640px 
  @media (max-width: #{$mobilescreen - 1px}) {
    @content;
  }
}
@mixin tablet { // Screens between 640px and 960px and up
  @media (max-width: #{$mediumscreen - 1px}) {
    @content;
  }
}
@mixin laptop { // Screens between 960px and 1024px and up
  @media (min-width: #{$mediumscreen}) and (max-width: #{$largescreen - 1px}) {
    @content;
  }
}
@mixin desktop { // Screens between 1024px and 1366px and up
  @media (min-width: #{$largescreen}) and (max-width: #{$xlargescreen - 1px}) {
    @content;
  }
}
@mixin monitor { // Screens 1366px and up
  @media (min-width: #{$xxlargescreen}) { 
    @content; 
  }



// z-index mixin helper
// the later the element in the list the higher the z-index
$z: (
  'header',
  'overlay',
  'main-menu',
  'mobile-menu'
);

@function z($value) {
  @IF index($z, $value) {
    @return index($z, $value);
  }
  @warn '#{$value} is not included in the $z list.';
}