// ---------------------------------------------------------------------
//  SCSS Settings
// ---------------------------------------------------------------------


// ----------------------------------------
// Fonts
// ----------------------------------------

// 300 | 400 |  500 |700
$sans-serif: 'theinhardt', mono, sans-serif;

// 300 | 400 | 500 | 700
$mono: 'sf-mono', mono, sans-serif;

// 700
$serif: 'Noe', serif;


// ----------------------------------------
// Font Size/ Line Height
// ----------------------------------------
$main-font: $sans-serif;
$base-font-size: 18px;
$base-line-height: 1.5;


// ----------------------------------------
// Colors
// ----------------------------------------

$brand: #06F395;

$black: #000000;

$border: #121212;

$blue: #1F44D2;

$gray-darkest: #161616;

$white: #ffffff;


$error: #FF3333;


// ----------------------------------------
// Breakpoints
// ----------------------------------------

$xlarge: 1280px;
$large: 1012px;
$medium: 768px;
$small: 544px;

@mixin start-at($device-width) {
  @media (min-width: $device-width) {
    @content;
  }
}

@mixin stop-at($device-width) {
  @media (max-width: $device-width - 1) {
    @content;
  }
}


// ----------------------------------------
// Global Variables
// ----------------------------------------


$header-breakpoint: $large;

$transition-speed: 0.4s;
$transition: $transition-speed ease;
// cuz I no type good
$trans: $transition-speed ease;

$wrapper-percentage: 92%;
$wrapper-width: 1260px;
$wrapper-padding: (100% - $wrapper-percentage) / 2;
